// CHUDMATE landing — top sections: Header, Hero, TrustStrip, Features
const { Button, Card, Badge, Tag, SpeechBubble } = window.CHUDMATEDesignSystem_3041b6;

const FACE = (window.__resources && window.__resources.face) || "assets/chudmate-face.png";
const BODY = (window.__resources && window.__resources.body) || "assets/chudmate-fullbody.png";
const ICON = (window.__resources && window.__resources.appIcon) || "assets/icons/chudmate-icon-128.png";

function Wordmark({ size = 30, light = false }) {
  return (
    <a href="#top" style={{ display: "inline-flex", alignItems: "center", gap: 12, textDecoration: "none" }}>
      <img src={ICON} alt="" width={size + 12} height={size + 12} style={{ borderRadius: 11, display: "block", boxShadow: "0 0 0 1.5px var(--line-hair)" }} />
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: size, lineHeight: 1, letterSpacing: "-0.01em", color: light ? "var(--chrome-bar-fg)" : "var(--ink)" }}>CHUDMATE</span>
    </a>
  );
}

function Header() {
  const link = { fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 15, color: "var(--ink)", textDecoration: "none" };
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 50, background: "color-mix(in srgb, var(--bg) 85%, transparent)", backdropFilter: "blur(8px)", borderBottom: "var(--border-hair)" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", padding: "14px 28px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <Wordmark />
        <nav style={{ display: "flex", alignItems: "center", gap: 28 }}>
          <a href="#features" style={link}>Features</a>
          <a href="#heckles" style={link}>Heckles</a>
          <a href="#pricing" style={link}>Pricing</a>
          <ThemeToggle />
          <Button variant="primary" size="sm" iconLeft={<WindowsGlyph />}>Download</Button>
        </nav>
      </div>
    </header>
  );
}

/* live dark/light switch — dark is the default; flipping sets data-theme="light"
   on <html>. No persistence (out of scope). */
function ThemeToggle() {
  const [light, setLight] = React.useState(() => document.documentElement.getAttribute("data-theme") === "light");
  const flip = () => {
    const next = !light;
    setLight(next);
    if (next) document.documentElement.setAttribute("data-theme", "light");
    else document.documentElement.removeAttribute("data-theme");
  };
  return (
    <button
      onClick={flip}
      title={light ? "he prefers the dark" : "fine. lights on."}
      aria-pressed={light}
      style={{ display: "inline-flex", alignItems: "center", gap: 8, height: 32, padding: "0 12px", fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink)", background: "var(--surface-raised)", border: "var(--edge-control)", borderRadius: "var(--radius-pill)", boxShadow: "var(--die-cut-sm)", cursor: "pointer" }}
    >
      <span aria-hidden style={{ width: 9, height: 9, borderRadius: "50%", background: light ? "var(--accent)" : "transparent", border: "var(--edge-fine)", flex: "0 0 auto" }} />
      lights: {light ? "on" : "off"}
    </button>
  );
}

function WindowsGlyph() {
  return <span style={{ display: "inline-block", width: 13, height: 13, background: "currentColor",
    clipPath: "polygon(0 8%, 46% 0, 46% 46%, 0 46%, 0 8%, 100% 0, 100% 46%, 54% 46%, 54% 100%, 100% 100%, 100% 54%, 0 54%, 0 92%, 46% 100%, 46% 54%)" }} />;
}

const HECKLES = [
  "Oh, a spreadsheet. Bold choice for a Tuesday.",
  "You've opened that doc nine times. Just write it.",
  "A meeting that could've been an email. Nice.",
  "Close the tab. You know the one.",
  "Inbox zero? In this economy?",
];

function Hero() {
  const [i, setI] = React.useState(0);
  const [hov, setHov] = React.useState(false);
  const firstBubble = React.useRef(true);
  React.useEffect(() => { firstBubble.current = false; }, []);
  const bubbleText = hov ? "hey. hands off." : HECKLES[i % HECKLES.length];
  return (
    <section id="top" style={{ maxWidth: 1180, margin: "0 auto", padding: "72px 28px 64px", display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 40, alignItems: "center" }}>
      <div>
        <div className="cm-label" style={{ marginBottom: 18 }}>Anti-productivity software · Windows 10/11</div>
        <h1 style={{ fontSize: 64, lineHeight: 1.12, margin: "0 0 20px", letterSpacing: "-0.02em" }}>He lives on your desktop. He is <span style={{ background: "var(--accent)", color: "var(--text-on-accent)", padding: "0 8px", borderRadius: 5, boxDecorationBreak: "clone", WebkitBoxDecorationBreak: "clone" }}>not impressed.</span></h1>
        <p style={{ fontSize: 20, lineHeight: 1.5, color: "var(--ink-soft)", maxWidth: 480, marginBottom: 28 }}>
          CHUDMATE is a crude little gremlin who wanders your screen and heckles you while you try to work. He is the opposite of a productivity app, on purpose.
        </p>
        <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
          <Button variant="primary" size="lg" iconLeft={<WindowsGlyph />}>Download for Windows</Button>
          <Button variant="secondary" size="lg">Pay what you want</Button>
        </div>
        <div style={{ display: "flex", gap: 18, marginTop: 22, alignItems: "center" }}>
          <Badge variant="outline">★ 4.9 on itch.io</Badge>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--muted)" }}>~4MB · no account · no telemetry · all vibes</span>
        </div>
      </div>
      <div style={{ position: "relative", display: "flex", justifyContent: "center", alignItems: "flex-end", minHeight: 440 }}>
        {/* lime is a light surface in every scheme — scope the plate light so
            its ink-on-lime die-cut detailing survives on dark pages */}
        <div data-theme="light" style={{ position: "absolute", inset: "8% 4% 0 4%", background: "var(--accent)", border: "var(--border-ink)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-sticker-lg)" }} />
        {/* the living chud — breathing, cursor-tracked eyes, hover recoil, poke squash */}
        <ChudHero onPoke={() => setI((n) => n + 1)} hovering={hov} setHovering={setHov} />
        <div key={bubbleText} className="cm-enter-bubble" style={{ position: "absolute", top: 18, left: -8, zIndex: 3, animationDelay: firstBubble.current ? undefined : "0s" }}>
          <SpeechBubble tail="bottom-right" variant={hov ? "lime" : "paper"} size="md" maxWidth="240px">{bubbleText}</SpeechBubble>
        </div>
        <button onClick={() => setI((n) => n + 1)} className="cm-nudge"
          style={{ position: "absolute", bottom: 16, right: 8, zIndex: 4, fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.08em", padding: "8px 12px", color: "var(--ink)", background: "var(--surface-raised)", border: "var(--edge-control)", borderRadius: "var(--radius-pill)", boxShadow: "var(--die-cut-sm)", cursor: "pointer" }}>
          poke him →
        </button>
      </div>
    </section>
  );
}

function TrustStrip() {
  const items = ["Wanders your desktop", "Reacts to your apps", "Drags around windows", "Fully ignorable", "Crude on purpose", "Over 200 heckles"];
  return <MarqueeStrip items={items} />;
}

function Features() {
  const feats = [
    { h: "He wanders", p: "CHUDMATE strolls across your desktop, sits on your taskbar, and leans on your windows like he owns the place." },
    { h: "He heckles", p: "Open a spreadsheet, join a call, or alt-tab for the fortieth time — he has a comment, and it is rarely kind." },
    { h: "He reacts", p: "He notices which app is focused and adjusts his disappointment accordingly. Gaming? He approves. Email? He sighs." },
    { h: "He's ignorable", p: "Click him into a corner, mute him, or banish him entirely. He'll be back. He always comes back." },
  ];
  return (
    <section id="features" style={{ maxWidth: 1180, margin: "0 auto", padding: "76px 28px" }}>
      <div className="cm-label" style={{ marginBottom: 10 }}>What you're signing up for</div>
      <h2 style={{ fontSize: 46, margin: "0 0 36px", maxWidth: 620 }}>A desktop pet that actively roots against you</h2>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 20 }}>
        {feats.map((f, k) => (
          <Reveal key={k} delay={k * 90} tilt={[-0.8, 0.9, 0.7, -1.0][k]}>
            <Card variant="sticker" interactive pad="26px">
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 10 }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 700, color: "var(--muted)" }}>{String(k + 1).padStart(2, "0")}</span>
                <h3 style={{ margin: 0, fontSize: 28 }}>{f.h}</h3>
              </div>
              <p style={{ margin: 0, fontSize: 16, color: "var(--ink-soft)", lineHeight: 1.5 }}>{f.p}</p>
            </Card>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Wordmark, Header, ThemeToggle, Hero, TrustStrip, Features, WindowsGlyph, HECKLES });
