// CHUDMATE landing — showcase sections: HeckleWall, Pricing (PWYW), Footer
const { Button: B2, Card: C2, Badge: BD2, Tag: T2, SpeechBubble: SB2 } = window.CHUDMATEDesignSystem_3041b6;

function HeckleWall() {
  const wall = [
    { t: "bottom-left", v: "paper", s: "md", x: "Saving the file as 'final_v7_REAL' again, are we." },
    { t: "bottom-right", v: "lime", s: "lg", x: "It's 2pm. You've been 'about to start' since 9." },
    { t: "left", v: "ink", s: "sm", x: "that's not work. that's a group chat." },
    { t: "top-right", v: "paper", s: "md", x: "Bold of you to schedule a 'quick sync'." },
    { t: "bottom-left", v: "lime", s: "md", x: "Another tab. Sure. That'll fix it." },
    { t: "top-left", v: "paper", s: "sm", x: "I watched you rename that folder for 4 minutes." },
  ];
  return (
    <section id="heckles" style={{ background: "var(--bg-inset)", borderTop: "var(--border-hair)", borderBottom: "var(--border-hair)" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", padding: "76px 28px" }}>
        <div className="cm-label" style={{ marginBottom: 10 }}>A small sample of his material</div>
        <h2 style={{ fontSize: 46, margin: "0 0 38px", maxWidth: 640 }}>Over 200 hand-written heckles, all equally unhelpful</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "34px 26px", alignItems: "start" }}>
          {wall.map((w, k) => (
            <div key={k} style={{ display: "flex", justifyContent: k % 2 ? "flex-end" : "flex-start", paddingTop: (k % 3) * 8 }}>
              <Reveal bubble delay={k * 110}>
                <div className="cm-float" style={{ "--tilt": ["-0.8deg", "0.7deg", "-0.5deg", "1deg", "-1.1deg", "0.6deg"][k], animationDelay: (k * 0.7) + "s" }}>
                  <SB2 tail={w.t} variant={w.v} size={w.s} maxWidth="280px">{w.x}</SB2>
                </div>
              </Reveal>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const [price, setPrice] = React.useState(5);
  const tiers = [0, 3, 5, 12];
  return (
    <section id="pricing" style={{ maxWidth: 1180, margin: "0 auto", padding: "84px 28px" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center" }}>
        <div>
          <div className="cm-label" style={{ marginBottom: 10 }}>Pricing, such as it is</div>
          <h2 style={{ fontSize: 52, margin: "0 0 18px" }}>Pay what you want.<br />He's not worth much.</h2>
          <p style={{ fontSize: 18, color: "var(--ink-soft)", lineHeight: 1.55, maxWidth: 440, marginBottom: 20 }}>
            CHUDMATE is free if you're broke and a few bucks if you're not. Either way you get the same ungrateful gremlin and every future update.
          </p>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <T2 dot>all updates</T2>
            <T2 dot>no subscription</T2>
            <T2 dot>refunds (he insists)</T2>
          </div>
        </div>
        <Reveal delay={120} tilt={0.5}>
        {/* the lime card is a LIGHT surface in every scheme — scope it light so
            controls on it keep ink lines even when the page is dark */}
        <C2 variant="lime" pad="32px" data-theme="light">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <span style={{ fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 13, textTransform: "uppercase", letterSpacing: "0.1em" }}>Name your price</span>
            <BD2 variant="solid">itch.io</BD2>
          </div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 84, lineHeight: 1, margin: "10px 0 4px" }}>${price}</div>
          <input type="range" min="0" max="25" value={price} onChange={(e) => setPrice(+e.target.value)}
            style={{ width: "100%", accentColor: "var(--slider-accent)", margin: "10px 0 16px" }} />
          <div style={{ display: "flex", gap: 8, marginBottom: 22 }}>
            {tiers.map((t) => (
              <button key={t} onClick={() => setPrice(t)} style={{ flex: 1, fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 14, padding: "8px 0", background: price === t ? "var(--ink)" : "transparent", color: price === t ? "var(--accent)" : "var(--ink)", border: "var(--border-ink)", borderRadius: "var(--radius-sm)", cursor: "pointer" }}>{t === 0 ? "Free" : "$" + t}</button>
            ))}
          </div>
          <B2 variant="secondary" size="lg" full>{price === 0 ? "Download for free" : `Download · pay $${price}`}</B2>
        </C2>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  const col = (title, links) => (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted-soft)" }}>{title}</div>
      {links.map((l) => <a key={l} href="#top" style={{ color: "var(--chrome-bar-fg)", textDecoration: "none", fontSize: 15, opacity: 0.9 }}>{l}</a>)}
    </div>
  );
  return (
    <footer style={{ background: "var(--chrome-bar-bg)", color: "var(--chrome-bar-fg)" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", padding: "56px 28px 40px", display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 30 }}>
        <div>
          <Wordmark light />
          <p style={{ color: "var(--muted-soft)", fontSize: 14, lineHeight: 1.5, maxWidth: 260, marginTop: 14 }}>
            A desktop gremlin for Windows. Crude art, buttery polish, zero productivity.
          </p>
        </div>
        {col("Product", ["Download", "Changelog", "Heckle archive", "Roadmap"])}
        {col("Help", ["FAQ", "Banish him", "Report a heckle", "Refunds"])}
        {col("Lurk", ["itch.io", "Discord", "Bluesky", "GitHub"])}
      </div>
      <div style={{ borderTop: "1px solid color-mix(in srgb, var(--chrome-bar-fg) 18%, transparent)", padding: "18px 28px", maxWidth: 1180, margin: "0 auto", display: "flex", justifyContent: "space-between", fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--muted-soft)" }}>
        <span>© CHUDMATE — made by a gremlin, for gremlins</span>
        <span>v0.3.1 · he says hi (he doesn't)</span>
      </div>
    </footer>
  );
}

Object.assign(window, { HeckleWall, Pricing, Footer });