const { useState: useStateL, useEffect: useEffectL, useRef: useRefL } = React;

function Landing({ tweaks, onEnterBuilder }) {
  return (
    <div style={landingStyles.page} data-screen-label="01 Landing">
      <LandingNav onLaunch={onEnterBuilder} />
      <Hero tweaks={tweaks} onEnterBuilder={onEnterBuilder} />
      <Marquee />
      <HowItWorks />
      <Showcase onEnterBuilder={onEnterBuilder} />
      <FAQ />
      <Footer />
    </div>
  );
}

function LandingNav({ onLaunch }) {
  return (
    <nav style={landingStyles.nav}>
      <div style={landingStyles.navInner}>
        <div style={landingStyles.brand}>
          <span style={landingStyles.brandMark} aria-hidden="true">◆</span>
          <span style={landingStyles.brandWord}>Forge</span>
        </div>
        <div style={landingStyles.navLinks}>
          <a href="#how">How it works</a>
          <a href="#showcase">Showcase</a>
          <a href="#faq">FAQ</a>
          <a href="#pricing">Pricing</a>
        </div>
        <div style={landingStyles.navActions}>
          <button style={landingStyles.btnGhost}>Sign in</button>
          <button style={landingStyles.btnSolid} onClick={() => onLaunch()}>
            Start building
          </button>
        </div>
      </div>
    </nav>
  );
}

const HERO_PROMPTS = [
  "a portfolio for a typeface designer in Lisbon",
  "a one-pager for a sourdough subscription, warm and rustic",
  "a docs site for my open-source rate limiter",
  "a launch page for an AI scheduling assistant, dark mode",
  "a wedding invite site, photo-led, with RSVP form",
];

function Hero({ tweaks, onEnterBuilder }) {
  const [draft, setDraft] = useStateL("");
  const [placeholder, setPlaceholder] = useStateL(HERO_PROMPTS[0]);
  const [phIndex, setPhIndex] = useStateL(0);

  useEffectL(() => {
    if (draft.length > 0) return;
    const id = setInterval(() => {
      setPhIndex((i) => (i + 1) % HERO_PROMPTS.length);
    }, 3200);
    return () => clearInterval(id);
  }, [draft]);

  useEffectL(() => {
    setPlaceholder(HERO_PROMPTS[phIndex]);
  }, [phIndex]);

  const submit = () => {
    onEnterBuilder(draft || HERO_PROMPTS[phIndex]);
  };

  const headlineLines = (tweaks.headline || "").split("\n");

  return (
    <header style={landingStyles.hero}>
      <div style={landingStyles.heroEyebrow}>
        <span style={landingStyles.dot} />
        <span>Now in open beta · v0.6</span>
      </div>
      <h1 style={landingStyles.h1}>
        {headlineLines.map((line, i) => (
          <span key={i} style={{ display: "block" }}>
            {i === headlineLines.length - 1 ? (
              <em style={landingStyles.h1Em}>{line}</em>
            ) : (
              line
            )}
          </span>
        ))}
      </h1>
      <p style={landingStyles.lede}>{tweaks.subhead}</p>

      <div style={landingStyles.promptCard}>
        <div style={landingStyles.promptHeader}>
          <span style={landingStyles.promptLabel}>NEW PROJECT</span>
          <span style={landingStyles.promptHint}>Press ⏎ to build</span>
        </div>
        <textarea
          style={landingStyles.promptInput}
          value={draft}
          placeholder={placeholder}
          onChange={(e) => setDraft(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter" && !e.shiftKey) {
              e.preventDefault();
              submit();
            }
          }}
          rows={3}
        />
        <div style={landingStyles.promptFoot}>
          <div style={landingStyles.chips}>
            {["Landing page", "Portfolio", "Docs", "Invite", "Storefront"].map((c) => (
              <button
                key={c}
                style={landingStyles.chip}
                onClick={() => setDraft((d) => (d ? d : `a ${c.toLowerCase()} for `))}
              >
                {c}
              </button>
            ))}
          </div>
          <button style={landingStyles.heroCta} onClick={submit}>
            Build it <span aria-hidden="true">→</span>
          </button>
        </div>
      </div>

      <HeroPreview />
    </header>
  );
}

function HeroPreview() {
  return (
    <div style={landingStyles.previewWrap} aria-hidden="true">
      <div style={landingStyles.previewLine} />
      <div style={landingStyles.previewWindow}>
        <div style={landingStyles.previewChrome}>
          <span style={{ ...landingStyles.dotSm, background: "#FF5F57" }} />
          <span style={{ ...landingStyles.dotSm, background: "#FEBC2E" }} />
          <span style={{ ...landingStyles.dotSm, background: "#28C840" }} />
          <div style={landingStyles.previewUrl}>
            <span style={landingStyles.lock}>⌁</span>
            forge.app/p/lisbon-type
          </div>
        </div>
        <div style={landingStyles.previewBody}>
          <div style={landingStyles.previewNav}>
            <span style={landingStyles.previewBrand}>Câmara Type</span>
            <span style={landingStyles.previewLinks}>
              <span>Specimens</span>
              <span>Custom</span>
              <span>About</span>
            </span>
          </div>
          <div style={landingStyles.previewHero}>
            <div style={landingStyles.previewKicker}>EST. 2021 · LISBON</div>
            <div style={landingStyles.previewH1}>
              Letterforms,<br />
              <em style={{ fontStyle: "italic", color: "var(--accent)" }}>
                drawn slowly.
              </em>
            </div>
            <div style={landingStyles.previewSpec}>Aa Bb Cc Dd Ee Ff Gg</div>
          </div>
          <div style={landingStyles.previewGrid}>
            <div style={landingStyles.previewTile}>Esfera</div>
            <div style={landingStyles.previewTile}>Marítimo</div>
            <div style={landingStyles.previewTile}>Pedra</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Marquee() {
  const items = [
    "1,284 sites built today",
    "avg. time to first deploy: 47s",
    "deploys to your domain",
    "real React + Tailwind under the hood",
    "edit in plain English",
    "version control built in",
  ];
  return (
    <div style={landingStyles.marquee}>
      <div style={landingStyles.marqueeTrack}>
        {[...items, ...items].map((t, i) => (
          <span key={i} style={landingStyles.marqueeItem}>
            <span style={landingStyles.marqueeDot}>●</span>
            {t}
          </span>
        ))}
      </div>
    </div>
  );
}

function HowItWorks() {
  const steps = [
    {
      n: "01",
      title: "Tell Forge what you need",
      body: "A sentence is enough. Mention tone, audience, sections — or just the gist. Forge fills in the rest.",
      art: <ArtPrompt />,
    },
    {
      n: "02",
      title: "Watch it draft, live",
      body: "Pages, components, copy, and a working preview render side-by-side. Nothing is a screenshot — it's real code.",
      art: <ArtBuild />,
    },
    {
      n: "03",
      title: "Edit by talking back",
      body: "Refine in the same chat. Move sections, swap palettes, restructure layouts. Forge keeps a diff so nothing's lost.",
      art: <ArtEdit />,
    },
    {
      n: "04",
      title: "Ship to your domain",
      body: "One click pushes to a real URL. Connect your domain, hand off the repo, or keep iterating in Forge.",
      art: <ArtShip />,
    },
  ];
  return (
    <section id="how" style={landingStyles.section}>
      <SectionHead
        kicker="HOW IT WORKS"
        title={<>Four steps. <em style={landingStyles.titleEm}>Roughly forty seconds.</em></>}
      />
      <div style={landingStyles.steps}>
        {steps.map((s) => (
          <article key={s.n} style={landingStyles.stepCard}>
            <div style={landingStyles.stepNum}>{s.n}</div>
            <div style={landingStyles.stepArt}>{s.art}</div>
            <h3 style={landingStyles.stepTitle}>{s.title}</h3>
            <p style={landingStyles.stepBody}>{s.body}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

function ArtPrompt() {
  return (
    <div style={artStyles.box}>
      <div style={{ ...artStyles.row, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)" }}>
        you ▸
      </div>
      <div style={artStyles.bubble}>
        a portfolio for a typeface designer in Lisbon, warm cream paper, italic display
      </div>
      <div style={artStyles.cursor} />
    </div>
  );
}

function ArtBuild() {
  return (
    <div style={artStyles.box}>
      <div style={artStyles.fileRow}>
        <span style={artStyles.fileDot} />
        <span style={artStyles.fileName}>app/page.tsx</span>
        <span style={artStyles.fileMeta}>+128</span>
      </div>
      <div style={artStyles.fileRow}>
        <span style={artStyles.fileDot} />
        <span style={artStyles.fileName}>components/Hero.tsx</span>
        <span style={artStyles.fileMeta}>+64</span>
      </div>
      <div style={artStyles.fileRow}>
        <span style={artStyles.fileDot} />
        <span style={artStyles.fileName}>styles/tokens.css</span>
        <span style={artStyles.fileMeta}>+22</span>
      </div>
      <div style={artStyles.bar} />
    </div>
  );
}

function ArtEdit() {
  return (
    <div style={artStyles.box}>
      <div style={artStyles.bubble}>
        make the hero quieter, smaller type
      </div>
      <div style={{ ...artStyles.diff, color: "oklch(0.55 0.14 25)" }}>
        − text-7xl tracking-tight
      </div>
      <div style={{ ...artStyles.diff, color: "oklch(0.55 0.14 145)" }}>
        + text-5xl tracking-normal
      </div>
    </div>
  );
}

function ArtShip() {
  return (
    <div style={artStyles.box}>
      <div style={artStyles.shipUrl}>
        <span style={{ color: "var(--ink-3)" }}>https://</span>
        camara.type<span style={{ color: "var(--ink-3)" }}>/</span>
      </div>
      <div style={artStyles.shipPill}>
        <span style={artStyles.shipPulse} />
        Live · 47s ago
      </div>
    </div>
  );
}

function Showcase({ onEnterBuilder }) {
  const items = [
    { tag: "PORTFOLIO", title: "Câmara Type", swatch: "oklch(0.92 0.04 60)", ink: "oklch(0.25 0.05 30)" },
    { tag: "STOREFRONT", title: "Northwell Sourdough", swatch: "oklch(0.88 0.06 80)", ink: "oklch(0.3 0.08 50)" },
    { tag: "DOCS", title: "Ratelimit.dev", swatch: "oklch(0.18 0.01 250)", ink: "oklch(0.92 0.03 90)" },
    { tag: "LANDING", title: "Atlas Scheduler", swatch: "oklch(0.96 0.02 240)", ink: "oklch(0.3 0.05 250)" },
    { tag: "INVITE", title: "Mira & Theo", swatch: "oklch(0.94 0.03 30)", ink: "oklch(0.35 0.08 20)" },
    { tag: "PORTFOLIO", title: "Studio Halfmoon", swatch: "oklch(0.22 0.02 140)", ink: "oklch(0.94 0.05 90)" },
  ];
  return (
    <section id="showcase" style={landingStyles.section}>
      <SectionHead
        kicker="MADE WITH FORGE"
        title={<>A few things <em style={landingStyles.titleEm}>built this week.</em></>}
        right={<a href="#" style={landingStyles.linkArrow}>See all 4,200 →</a>}
      />
      <div style={landingStyles.gallery}>
        {items.map((it, i) => (
          <article
            key={i}
            style={{
              ...landingStyles.galleryCard,
              background: it.swatch,
              color: it.ink,
            }}
          >
            <div style={landingStyles.galleryTag}>{it.tag}</div>
            <div style={landingStyles.galleryTitle}>{it.title}</div>
            <div style={landingStyles.galleryFoot}>
              <span style={landingStyles.galleryDot} />
              <span style={landingStyles.galleryMeta}>built in 38s</span>
            </div>
          </article>
        ))}
      </div>
      <div style={landingStyles.bigCta}>
        <h2 style={landingStyles.bigCtaTitle}>
          Your turn.<br />
          <em style={landingStyles.titleEm}>What are you making?</em>
        </h2>
        <button style={landingStyles.btnSolidBig} onClick={onEnterBuilder}>
          Open the builder →
        </button>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    {
      q: "Is the code real, or is it a screenshot?",
      a: "Real. Forge generates a Next.js + Tailwind project. You can inspect every file, edit it in the chat, or hand off the repo to your team.",
    },
    {
      q: "Who owns what Forge builds?",
      a: "You do. The code, the content, the deploy. Forge keeps no claim. Take the repo with you whenever you want.",
    },
    {
      q: "What if I'm not technical?",
      a: "You don't need to read a line of code. Talk to Forge in plain language — describe what you want, point at sections, and it'll edit them.",
    },
    {
      q: "Can I bring my own brand and components?",
      a: "Yes. Drop in a Figma file, a style guide, or a few screenshots. Forge will lift colors, type, and spacing and apply them to anything it builds.",
    },
  ];
  const [open, setOpen] = useStateL(0);
  return (
    <section id="faq" style={landingStyles.section}>
      <SectionHead
        kicker="QUESTIONS"
        title={<>Reasonable <em style={landingStyles.titleEm}>doubts.</em></>}
      />
      <div style={landingStyles.faq}>
        {items.map((it, i) => (
          <button
            key={i}
            style={landingStyles.faqRow}
            onClick={() => setOpen(open === i ? -1 : i)}
          >
            <div style={landingStyles.faqQ}>
              <span>{it.q}</span>
              <span style={{ ...landingStyles.faqIcon, transform: open === i ? "rotate(45deg)" : "rotate(0)" }}>+</span>
            </div>
            {open === i && <div style={landingStyles.faqA}>{it.a}</div>}
          </button>
        ))}
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={landingStyles.footer}>
      <div style={landingStyles.footerTop}>
        <div style={landingStyles.footerBrand}>
          <span style={landingStyles.brandMark}>◆</span>
          <span style={landingStyles.footerWord}>Forge</span>
        </div>
        <div style={landingStyles.footerCols}>
          <div style={landingStyles.footerCol}>
            <div style={landingStyles.footerHead}>Product</div>
            <a href="#">Builder</a>
            <a href="#">Showcase</a>
            <a href="#">Pricing</a>
            <a href="#">Changelog</a>
          </div>
          <div style={landingStyles.footerCol}>
            <div style={landingStyles.footerHead}>Company</div>
            <a href="#">About</a>
            <a href="#">Blog</a>
            <a href="#">Careers</a>
            <a href="#">Press</a>
          </div>
          <div style={landingStyles.footerCol}>
            <div style={landingStyles.footerHead}>Resources</div>
            <a href="#">Docs</a>
            <a href="#">Templates</a>
            <a href="#">Community</a>
            <a href="#">Support</a>
          </div>
        </div>
      </div>
      <div style={landingStyles.footerBottom}>
        <span>© 2026 Forge Labs, Inc.</span>
        <span style={landingStyles.footerBig}>Forge</span>
        <span>Made with Forge</span>
      </div>
    </footer>
  );
}

function SectionHead({ kicker, title, right }) {
  return (
    <div style={landingStyles.sectionHead}>
      <div style={landingStyles.sectionLeft}>
        <div style={landingStyles.kicker}>{kicker}</div>
        <h2 style={landingStyles.h2}>{title}</h2>
      </div>
      {right && <div style={landingStyles.sectionRight}>{right}</div>}
    </div>
  );
}

const PAD = "max(24px, calc(8vw * var(--pad)))";

const landingStyles = {
  page: {
    background: "var(--paper)",
    color: "var(--ink)",
    fontFamily: "var(--font-ui)",
    minHeight: "100vh",
  },
  nav: {
    position: "sticky",
    top: 0,
    zIndex: 50,
    background: "color-mix(in oklab, var(--paper) 88%, transparent)",
    backdropFilter: "blur(12px)",
    WebkitBackdropFilter: "blur(12px)",
    borderBottom: "1px solid var(--rule)",
  },
  navInner: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    gap: 24,
    padding: `16px ${PAD}`,
  },
  brand: { display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-display)" },
  brandMark: { color: "var(--accent)", fontSize: 14 },
  brandWord: { fontSize: 22, letterSpacing: "-0.01em" },
  navLinks: { display: "flex", gap: 28, fontSize: 14, color: "var(--ink-2)" },
  navActions: { display: "flex", gap: 8, alignItems: "center" },
  btnGhost: {
    padding: "8px 14px",
    borderRadius: 999,
    fontSize: 14,
    color: "var(--ink-2)",
    whiteSpace: "nowrap",
  },
  btnSolid: {
    padding: "8px 16px",
    borderRadius: 999,
    fontSize: 14,
    fontWeight: 500,
    background: "var(--ink)",
    color: "var(--paper)",
    whiteSpace: "nowrap",
  },

  hero: {
    padding: `clamp(56px, 9vw, 120px) ${PAD} 32px`,
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    textAlign: "center",
    position: "relative",
  },
  heroEyebrow: {
    display: "inline-flex",
    alignItems: "center",
    gap: 8,
    padding: "6px 14px",
    borderRadius: 999,
    border: "1px solid var(--rule)",
    fontSize: 12,
    fontFamily: "var(--font-mono)",
    color: "var(--ink-2)",
    marginBottom: 28,
  },
  dot: {
    width: 8,
    height: 8,
    borderRadius: 999,
    background: "var(--accent)",
    boxShadow: "0 0 0 4px color-mix(in oklab, var(--accent) 25%, transparent)",
    animation: "pulse 2s ease-in-out infinite",
  },
  h1: {
    fontFamily: "var(--font-display)",
    fontWeight: 400,
    fontSize: "clamp(56px, 9vw, 132px)",
    lineHeight: 1.05,
    letterSpacing: "-0.025em",
    maxWidth: 1100,
    color: "var(--ink)",
  },
  h1Em: {
    fontStyle: "italic",
    color: "var(--accent)",
  },
  lede: {
    fontSize: "clamp(17px, 1.6vw, 21px)",
    color: "var(--ink-2)",
    maxWidth: 620,
    lineHeight: 1.4,
    marginTop: 24,
    textWrap: "pretty",
  },

  promptCard: {
    marginTop: 44,
    width: "min(720px, 100%)",
    background: "var(--paper-2)",
    border: "1px solid var(--rule)",
    borderRadius: 18,
    padding: 14,
    boxShadow: "0 1px 0 rgba(255,255,255,0.5) inset, 0 24px 60px -28px rgba(0,0,0,0.18)",
    textAlign: "left",
  },
  promptHeader: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    padding: "4px 6px 10px",
    fontFamily: "var(--font-mono)",
    fontSize: 11,
  },
  promptLabel: { color: "var(--accent)", letterSpacing: "0.08em" },
  promptHint: { color: "var(--ink-3)" },
  promptInput: {
    width: "100%",
    border: "none",
    outline: "none",
    background: "transparent",
    color: "var(--ink)",
    fontSize: 18,
    fontFamily: "var(--font-ui)",
    lineHeight: 1.45,
    resize: "none",
    padding: "8px 6px",
  },
  promptFoot: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    gap: 12,
    paddingTop: 12,
    borderTop: "1px dashed var(--rule)",
    flexWrap: "wrap",
  },
  chips: { display: "flex", gap: 6, flexWrap: "wrap" },
  chip: {
    padding: "6px 12px",
    borderRadius: 999,
    border: "1px solid var(--rule)",
    fontSize: 12,
    color: "var(--ink-2)",
    background: "var(--paper)",
  },
  heroCta: {
    padding: "10px 20px",
    borderRadius: 999,
    background: "var(--accent)",
    color: "var(--accent-fg)",
    fontWeight: 500,
    fontSize: 14,
    display: "inline-flex",
    alignItems: "center",
    gap: 8,
  },

  previewWrap: {
    marginTop: 64,
    width: "min(1100px, 100%)",
    position: "relative",
    paddingTop: 28,
  },
  previewLine: {
    position: "absolute",
    top: 0,
    left: "50%",
    transform: "translateX(-50%)",
    width: 1,
    height: 28,
    background: "linear-gradient(to bottom, transparent, var(--rule))",
  },
  previewWindow: {
    background: "var(--paper-2)",
    border: "1px solid var(--rule)",
    borderRadius: 14,
    overflow: "hidden",
    boxShadow: "0 40px 100px -30px rgba(0,0,0,0.25)",
  },
  previewChrome: {
    display: "flex",
    alignItems: "center",
    gap: 6,
    padding: "12px 16px",
    background: "var(--paper-3)",
    borderBottom: "1px solid var(--rule)",
  },
  dotSm: { width: 11, height: 11, borderRadius: 999, display: "inline-block" },
  previewUrl: {
    flex: 1,
    textAlign: "center",
    fontFamily: "var(--font-mono)",
    fontSize: 12,
    color: "var(--ink-3)",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    gap: 6,
  },
  lock: { color: "var(--accent)" },
  previewBody: {
    padding: "32px clamp(24px, 5vw, 56px) 48px",
    background: "oklch(0.97 0.012 75)",
    color: "oklch(0.22 0.02 40)",
    minHeight: 380,
  },
  previewNav: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 36,
    fontFamily: "var(--font-display)",
  },
  previewBrand: { fontSize: 22, letterSpacing: "-0.01em" },
  previewLinks: {
    display: "flex",
    gap: 24,
    fontFamily: "var(--font-mono)",
    fontSize: 11,
    color: "oklch(0.45 0.02 40)",
    letterSpacing: "0.06em",
    textTransform: "uppercase",
  },
  previewHero: { textAlign: "left", marginBottom: 32 },
  previewKicker: {
    fontFamily: "var(--font-mono)",
    fontSize: 11,
    letterSpacing: "0.1em",
    color: "oklch(0.45 0.02 40)",
    marginBottom: 16,
  },
  previewH1: {
    fontFamily: "var(--font-display)",
    fontSize: "clamp(40px, 6vw, 88px)",
    lineHeight: 1.05,
    letterSpacing: "-0.02em",
  },
  previewSpec: {
    fontFamily: "var(--font-display)",
    fontSize: 36,
    color: "oklch(0.55 0.04 40)",
    marginTop: 16,
    letterSpacing: "0.02em",
  },
  previewGrid: {
    display: "grid",
    gridTemplateColumns: "1fr 1fr 1fr",
    gap: 16,
  },
  previewTile: {
    aspectRatio: "4 / 3",
    background: "oklch(0.93 0.03 60)",
    borderRadius: 6,
    display: "flex",
    alignItems: "flex-end",
    padding: 12,
    fontFamily: "var(--font-display)",
    fontSize: 22,
    color: "oklch(0.3 0.04 40)",
  },

  marquee: {
    borderTop: "1px solid var(--rule)",
    borderBottom: "1px solid var(--rule)",
    overflow: "hidden",
    padding: "18px 0",
    marginTop: 80,
    background: "var(--paper-2)",
  },
  marqueeTrack: {
    display: "flex",
    gap: 48,
    whiteSpace: "nowrap",
    animation: "scroll 38s linear infinite",
    fontFamily: "var(--font-mono)",
    fontSize: 13,
    color: "var(--ink-2)",
  },
  marqueeItem: { display: "inline-flex", alignItems: "center", gap: 12 },
  marqueeDot: { color: "var(--accent)", fontSize: 8 },

  section: {
    padding: `clamp(80px, 10vw, 140px) ${PAD}`,
    borderBottom: "1px solid var(--rule)",
  },
  sectionHead: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "flex-end",
    marginBottom: 56,
    gap: 24,
    flexWrap: "wrap",
  },
  sectionLeft: { maxWidth: 720 },
  sectionRight: {},
  kicker: {
    fontFamily: "var(--font-mono)",
    fontSize: 12,
    letterSpacing: "0.1em",
    color: "var(--accent)",
    marginBottom: 16,
  },
  h2: {
    fontFamily: "var(--font-display)",
    fontWeight: 400,
    fontSize: "clamp(40px, 5.5vw, 72px)",
    lineHeight: 1.08,
    letterSpacing: "-0.02em",
  },
  titleEm: { fontStyle: "italic", color: "var(--accent)" },
  linkArrow: {
    fontFamily: "var(--font-mono)",
    fontSize: 13,
    color: "var(--ink-2)",
    borderBottom: "1px solid var(--rule)",
    paddingBottom: 4,
  },

  steps: {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
    gap: 1,
    background: "var(--rule)",
    border: "1px solid var(--rule)",
  },
  stepCard: {
    background: "var(--paper)",
    padding: 28,
    display: "flex",
    flexDirection: "column",
    gap: 16,
    minHeight: 360,
  },
  stepNum: {
    fontFamily: "var(--font-mono)",
    fontSize: 11,
    color: "var(--ink-3)",
    letterSpacing: "0.1em",
  },
  stepArt: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", padding: "12px 0" },
  stepTitle: {
    fontFamily: "var(--font-display)",
    fontSize: 28,
    lineHeight: 1.05,
    letterSpacing: "-0.01em",
    fontWeight: 400,
  },
  stepBody: { color: "var(--ink-2)", fontSize: 14, lineHeight: 1.5, textWrap: "pretty" },

  gallery: {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
    gap: 16,
  },
  galleryCard: {
    aspectRatio: "4 / 3",
    borderRadius: 12,
    padding: 24,
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between",
    cursor: "pointer",
    transition: "transform 0.2s ease",
    fontFamily: "var(--font-display)",
  },
  galleryTag: {
    fontFamily: "var(--font-mono)",
    fontSize: 10,
    letterSpacing: "0.12em",
    opacity: 0.7,
  },
  galleryTitle: {
    fontSize: 36,
    lineHeight: 1,
    letterSpacing: "-0.02em",
  },
  galleryFoot: {
    display: "flex",
    alignItems: "center",
    gap: 8,
    fontFamily: "var(--font-mono)",
    fontSize: 11,
    opacity: 0.6,
  },
  galleryDot: { width: 6, height: 6, borderRadius: 999, background: "currentColor" },
  galleryMeta: {},

  bigCta: {
    marginTop: 96,
    textAlign: "center",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: 32,
  },
  bigCtaTitle: {
    fontFamily: "var(--font-display)",
    fontWeight: 400,
    fontSize: "clamp(48px, 7vw, 96px)",
    lineHeight: 1.05,
    letterSpacing: "-0.025em",
  },
  btnSolidBig: {
    padding: "16px 32px",
    borderRadius: 999,
    background: "var(--ink)",
    color: "var(--paper)",
    fontSize: 16,
    fontWeight: 500,
  },

  faq: {
    display: "flex",
    flexDirection: "column",
    borderTop: "1px solid var(--rule)",
    width: "min(900px, 100%)",
    margin: "0 auto",
  },
  faqRow: {
    width: "100%",
    textAlign: "left",
    padding: "28px 4px",
    borderBottom: "1px solid var(--rule)",
    background: "transparent",
    cursor: "pointer",
    display: "flex",
    flexDirection: "column",
    gap: 12,
  },
  faqQ: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    fontFamily: "var(--font-display)",
    fontSize: "clamp(20px, 2.4vw, 28px)",
    lineHeight: 1.2,
  },
  faqIcon: {
    fontSize: 24,
    color: "var(--accent)",
    transition: "transform 0.2s ease",
    fontFamily: "var(--font-ui)",
    fontWeight: 300,
  },
  faqA: {
    color: "var(--ink-2)",
    fontSize: 16,
    lineHeight: 1.5,
    maxWidth: 720,
    textWrap: "pretty",
  },

  footer: {
    background: "var(--paper-2)",
    padding: `64px ${PAD} 24px`,
  },
  footerTop: {
    display: "flex",
    justifyContent: "space-between",
    gap: 48,
    flexWrap: "wrap",
    borderBottom: "1px solid var(--rule)",
    paddingBottom: 48,
  },
  footerBrand: { display: "flex", alignItems: "center", gap: 10, fontFamily: "var(--font-display)", fontSize: 28 },
  footerWord: { letterSpacing: "-0.01em" },
  footerCols: { display: "flex", gap: 64, flexWrap: "wrap" },
  footerCol: { display: "flex", flexDirection: "column", gap: 10, fontSize: 14, color: "var(--ink-2)" },
  footerHead: {
    fontFamily: "var(--font-mono)",
    fontSize: 11,
    letterSpacing: "0.1em",
    color: "var(--ink-3)",
    marginBottom: 6,
  },
  footerBottom: {
    display: "grid",
    gridTemplateColumns: "1fr auto 1fr",
    alignItems: "center",
    paddingTop: 24,
    fontFamily: "var(--font-mono)",
    fontSize: 11,
    color: "var(--ink-3)",
  },
  footerBig: {
    fontFamily: "var(--font-display)",
    fontSize: "clamp(80px, 18vw, 280px)",
    lineHeight: 1,
    color: "var(--ink)",
    letterSpacing: "-0.04em",
    textAlign: "center",
    fontStyle: "italic",
  },
};

const artStyles = {
  box: {
    width: "100%",
    height: "100%",
    minHeight: 160,
    background: "var(--paper-2)",
    border: "1px solid var(--rule)",
    borderRadius: 8,
    padding: 14,
    display: "flex",
    flexDirection: "column",
    gap: 8,
    fontSize: 12,
  },
  row: { display: "flex", alignItems: "center", gap: 8 },
  bubble: {
    background: "var(--paper)",
    border: "1px solid var(--rule)",
    borderRadius: 10,
    padding: "8px 12px",
    fontSize: 12,
    color: "var(--ink-2)",
    lineHeight: 1.4,
  },
  cursor: {
    width: 7,
    height: 14,
    background: "var(--accent)",
    alignSelf: "flex-start",
    animation: "blink 1s steps(2, start) infinite",
  },
  fileRow: {
    display: "flex",
    alignItems: "center",
    gap: 8,
    fontFamily: "var(--font-mono)",
    fontSize: 11,
  },
  fileDot: { width: 6, height: 6, borderRadius: 999, background: "var(--accent)" },
  fileName: { color: "var(--ink-2)", flex: 1 },
  fileMeta: { color: "oklch(0.55 0.14 145)", fontSize: 10 },
  bar: {
    marginTop: 8,
    height: 4,
    borderRadius: 4,
    background: "linear-gradient(to right, var(--accent) 70%, var(--rule) 70%)",
  },
  diff: {
    fontFamily: "var(--font-mono)",
    fontSize: 11,
    padding: "4px 8px",
    borderRadius: 4,
    background: "var(--paper)",
  },
  shipUrl: {
    fontFamily: "var(--font-mono)",
    fontSize: 13,
    padding: "8px 12px",
    background: "var(--paper)",
    border: "1px solid var(--rule)",
    borderRadius: 8,
    color: "var(--ink)",
  },
  shipPill: {
    alignSelf: "flex-start",
    display: "inline-flex",
    alignItems: "center",
    gap: 8,
    padding: "6px 12px",
    borderRadius: 999,
    background: "color-mix(in oklab, var(--accent) 15%, var(--paper))",
    color: "var(--accent)",
    fontFamily: "var(--font-mono)",
    fontSize: 11,
  },
  shipPulse: {
    width: 6,
    height: 6,
    borderRadius: 999,
    background: "var(--accent)",
    boxShadow: "0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent)",
    animation: "pulse 1.6s ease-in-out infinite",
  },
};

// inject keyframes once
if (!document.getElementById("__landing_keyframes")) {
  const style = document.createElement("style");
  style.id = "__landing_keyframes";
  style.textContent = `
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
    @keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
    @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  `;
  document.head.appendChild(style);
}

window.Landing = Landing;