// landing.jsx — magazine-style landing page with embedded hero animation

function Landing() {
  return (
    <div>
      <SiteHeader current="/"/>
      <LandingHero/>
      <ProofRow/>
      <HowItWorks/>
      <DesignsShowcase/>
      <DomainTease/>
      <PricingTease/>
      <Testimonials/>
      <FinalCTA/>
      <SiteFooter/>
    </div>
  );
}

// ── Hero ────────────────────────────────────────────────────────────────────

function LandingHero() {
  return (
    <section style={{ padding: "var(--space-8) 0 var(--space-7)" }}>
      <div className="container">

        {/* Top metadata strip — issue/volume style */}
        <div style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          paddingBottom: 24,
          borderBottom: "0.5px solid var(--rule)",
          marginBottom: 56,
        }}>
          <div className="eyebrow">VOL. 01 · ISSUE 14 · MAY MMXXVI</div>
          <div className="eyebrow">A PORTFOLIO LAUNCH PRODUCT</div>
          <div className="eyebrow">PUBLISHED FROM BROOKLYN</div>
        </div>

        {/* Animated video — full-bleed wide, glow only (no frame) */}
        <div className="entrance hero-video-wrap" style={{
          position: "relative",
          width: "100%",
          aspectRatio: "16 / 9",
          marginBottom: 48,
        }}>
          {/* Soft faded glow halo */}
          <div aria-hidden="true" style={{
            position: "absolute",
            inset: "-10%",
            background: "radial-gradient(ellipse at center, color-mix(in oklch, var(--accent) 40%, transparent) 0%, color-mix(in oklch, var(--accent) 18%, transparent) 30%, color-mix(in oklch, var(--accent) 6%, transparent) 55%, transparent 75%)",
            filter: "blur(80px)",
            opacity: 0.95,
            zIndex: 0,
            pointerEvents: "none",
            animation: "hero-glow-pulse 6s ease-in-out infinite",
          }}/>
          <div style={{
            position: "relative",
            width: "100%",
            height: "100%",
            zIndex: 1,
          }}>
            <HeroAnimation embedded={true}/>
          </div>
        </div>

        {/* Headline copy beneath video */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 96,
          alignItems: "start",
          marginTop: 64,
        }}>
          <div className="entrance d2">
            <h1 style={{
              fontSize: "clamp(54px, 7.5vw, 112px)",
              lineHeight: 0.92,
              letterSpacing: "-0.03em",
              maxWidth: "12ch",
            }}>
              The portfolio<br/>
              you don't<br/>
              <em style={{ fontStyle: "italic", color: "var(--accent)" }}>build.</em>
            </h1>
          </div>
          <div className="entrance d3" style={{ paddingTop: 28 }}>
            <p className="dropcap" style={{
              fontFamily: "var(--font-serif)",
              fontSize: 22,
              lineHeight: 1.45,
              color: "var(--ink-2)",
              maxWidth: "38ch",
            }}>
              Folio reads your GitHub, LinkedIn, and resume,
              writes a portfolio you'd actually approve, and ships it
              to a real domain — usually before your coffee gets cold.
              No drag-and-drop. No empty templates. No more weekends
              spent on a personal site.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 36 }}>
              <a href="#/goal" className="btn btn-primary">
                Build mine in 8 minutes <span className="arr">→</span>
              </a>
              <a href="#how" className="btn btn-ghost">
                See how it works
              </a>
            </div>
            <div style={{ marginTop: 28, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", color: "var(--ink-3)" }}>
              <span className="chip live" style={{ marginRight: 12 }}>11,418 PORTFOLIOS LIVE TODAY</span>
              <span style={{ color: "var(--ink-4)" }}>NO CREDIT CARD TO PREVIEW</span>
            </div>
          </div>
        </div>

      </div>
    </section>
  );
}

// ── Proof row (logos / press) ──────────────────────────────────────────────

function ProofRow() {
  const items = [
    "AS SEEN IN", "THE INFORMATION", "HACKER NEWS · #1", "PRODUCT HUNT", "TLDR NEWSLETTER", "LENNY'S LIST", "INDEX VENTURES",
  ];
  return (
    <section style={{
      borderTop: "0.5px solid var(--rule)",
      borderBottom: "0.5px solid var(--rule)",
      padding: "28px 0",
      overflow: "hidden",
    }}>
      <div className="container" style={{
        display: "flex",
        justifyContent: "space-between",
        gap: 32,
        flexWrap: "wrap",
      }}>
        {items.map((it, i) => (
          <div key={i} style={{
            fontFamily: "var(--font-mono)",
            fontSize: 11,
            letterSpacing: "0.16em",
            color: i === 0 ? "var(--ink-3)" : "var(--ink-2)",
            fontWeight: i === 0 ? 400 : 500,
          }}>
            {it}
          </div>
        ))}
      </div>
    </section>
  );
}

// ── How it works ───────────────────────────────────────────────────────────

function HowItWorks() {
  const steps = [
    {
      n: "I",
      title: "Bring what you've already made.",
      body: "Paste your GitHub username, drop in a resume PDF, link a LinkedIn — whatever you've got. The minimum input is one of those. The maximum is twelve sources. Most people land in the middle.",
      detail: "GitHub · LinkedIn · Resume · X · Substack · Medium · Dev.to · Dribbble · Behance · Figma · Product Hunt · YouTube · Kaggle · Hugging Face · Google Scholar",
    },
    {
      n: "II",
      title: "We read it. Carefully.",
      body: "Folio scans your work history, repos, writing, and engagement to figure out what you're actually known for — and what you're trying to be known for. Two are usually different.",
      detail: "PROCESSING · 30–90 SECONDS",
    },
    {
      n: "III",
      title: "Approve a portfolio.",
      body: "Three positioning angles, populated with your real work. Pick one. Pick a design. Pick a domain. Each click narrows; nothing demands a blank canvas.",
      detail: "FROM 3 OPTIONS → 1 PORTFOLIO",
    },
    {
      n: "IV",
      title: "Ship to a real domain.",
      body: "Domain registered, SSL provisioned, DNS pointed, site published. We host it. We update it when GitHub changes. You get a temporary live URL the moment you check out.",
      detail: "AVERAGE TIME-TO-LIVE: 04:18",
    },
  ];

  return (
    <section id="how" style={{ padding: "var(--space-9) 0", borderBottom: "0.5px solid var(--rule)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 96, marginBottom: 80 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>§ HOW IT WORKS</div>
            <h2 style={{ fontSize: "clamp(40px, 4.8vw, 64px)", lineHeight: 1, letterSpacing: "-0.025em" }}>
              Approve,<br/>
              don't <em style={{ fontStyle: "italic", color: "var(--accent)" }}>author</em>.
            </h2>
          </div>
          <div style={{ paddingTop: 24 }}>
            <p style={{ fontFamily: "var(--font-serif)", fontSize: 22, lineHeight: 1.5, color: "var(--ink-2)", maxWidth: "44ch" }}>
              Most portfolio products hand you a blank canvas and a help article.
              We hand you a finished site with your real work in it. You spend
              the next ten minutes deciding what to keep — not what to write.
            </p>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }}>
          {steps.map((s, i) => (
            <article key={i} style={{
              padding: "32px 0",
              borderTop: "0.5px solid var(--rule)",
              display: "grid",
              gridTemplateColumns: "auto 1fr",
              gap: 32,
            }}>
              <div style={{
                fontFamily: "var(--font-serif)",
                fontSize: 56,
                color: "var(--accent)",
                lineHeight: 0.9,
                fontStyle: "italic",
                fontWeight: 400,
              }}>{s.n}</div>
              <div>
                <h3 style={{ fontSize: 28, marginBottom: 12, lineHeight: 1.1 }}>{s.title}</h3>
                <p style={{ color: "var(--ink-2)", lineHeight: 1.55, marginBottom: 16, fontSize: 16 }}>{s.body}</p>
                <div className="eyebrow" style={{ fontSize: 10, color: "var(--ink-4)" }}>{s.detail}</div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Designs showcase ───────────────────────────────────────────────────────

function DesignsShowcase() {
  const [active, setActive] = React.useState("editorial");
  const designs = window.DESIGNS;

  return (
    <section id="templates" style={{ padding: "var(--space-9) 0", borderBottom: "0.5px solid var(--rule)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, marginBottom: 64, alignItems: "end" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>§ FIVE DESIGNS, EACH POPULATED</div>
            <h2 style={{ fontSize: "clamp(40px, 4.8vw, 64px)", lineHeight: 1, letterSpacing: "-0.025em" }}>
              Not empty<br/>templates.
            </h2>
          </div>
          <p style={{ fontSize: 17, color: "var(--ink-2)", lineHeight: 1.5, maxWidth: "42ch" }}>
            Every preview is rendered with <em>your</em> work — your repos,
            your writing, your projects. You're not picking a shell. You're
            picking which version of yourself to ship.
          </p>
        </div>

        {/* Tab strip */}
        <div style={{
          display: "flex",
          gap: 0,
          borderBottom: "0.5px solid var(--rule)",
          marginBottom: 32,
        }}>
          {designs.map(d => (
            <button
              key={d.id}
              onClick={() => setActive(d.id)}
              style={{
                background: "transparent",
                border: 0,
                padding: "16px 24px",
                fontFamily: "var(--font-mono)",
                fontSize: 11,
                letterSpacing: "0.12em",
                textTransform: "uppercase",
                color: active === d.id ? "var(--ink)" : "var(--ink-3)",
                borderBottom: active === d.id ? "1px solid var(--ink)" : "1px solid transparent",
                marginBottom: -0.5,
                cursor: "pointer",
                transition: "color 160ms",
              }}
            >
              {d.label}
            </button>
          ))}
        </div>

        <DesignPreview design={active}/>
      </div>
    </section>
  );
}

function DesignPreview({ design }) {
  const presets = {
    editorial: <EditorialPreview/>,
    terminal: <TerminalPreview/>,
    studio: <StudioPreview/>,
    operator: <OperatorPreview/>,
    academic: <AcademicPreview/>,
  };
  return (
    <div style={{
      background: "var(--paper-2)",
      border: "0.5px solid var(--rule)",
      borderRadius: "var(--radius-lg)",
      overflow: "hidden",
      aspectRatio: "16 / 9",
      position: "relative",
    }}>
      {presets[design]}
    </div>
  );
}

function EditorialPreview() {
  return (
    <div style={{ height: "100%", padding: "10% 12%", background: "#fdfbf6", fontFamily: "Newsreader, serif" }}>
      <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, letterSpacing: "0.16em", color: "#a09889", marginBottom: 24 }}>FULL-STACK AI ENGINEER · BROOKLYN</div>
      <div style={{ fontSize: "min(8vw, 96px)", lineHeight: 0.95, letterSpacing: "-0.025em", color: "#1a1814", marginBottom: 24 }}>Maya Okonkwo.</div>
      <div style={{ fontFamily: "Newsreader, serif", fontStyle: "italic", fontSize: "min(2.4vw, 26px)", color: "#3a3530", maxWidth: "30ch" }}>I build inference systems that don't fall over.</div>
    </div>
  );
}

function TerminalPreview() {
  return (
    <div style={{ height: "100%", padding: "8%", background: "#0c0c0c", fontFamily: "JetBrains Mono, monospace", color: "#d8d2c5", fontSize: "min(1.6vw, 14px)" }}>
      <div style={{ color: "#7a8568" }}>$ whoami</div>
      <div>maya.okonkwo · full-stack ai engineer · brooklyn</div>
      <div style={{ color: "#7a8568", marginTop: 18 }}>$ cat headline.txt</div>
      <div style={{ fontSize: "min(2.6vw, 22px)", marginTop: 6 }}>I build inference systems that don't fall over.</div>
      <div style={{ color: "#7a8568", marginTop: 18 }}>$ ls projects/</div>
      <div>vllm-gateway/   loadbearing/   tessera/   tinyeval/</div>
      <div style={{ color: "#a85533", marginTop: 18 }}>● online · last commit 2h ago</div>
    </div>
  );
}

function StudioPreview() {
  return (
    <div style={{ height: "100%", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, background: "#fdfbf6" }}>
      <div style={{ padding: "10%", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
        <div className="eyebrow" style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "#a09889", letterSpacing: "0.16em" }}>STUDIO · MMXXVI</div>
        <div>
          <div style={{ fontFamily: "Newsreader, serif", fontSize: "min(5vw, 56px)", lineHeight: 0.95, color: "#1a1814" }}>Selected works,<br/>2019—now.</div>
          <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, marginTop: 24, color: "#a09889" }}>14 PROJECTS · 6 CASE STUDIES</div>
        </div>
      </div>
      <div style={{ background: "repeating-linear-gradient(135deg, #e9e6df 0 12px, #dcd8cf 12px 24px)", color: "#6b6458", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "JetBrains Mono, monospace", fontSize: 11, letterSpacing: "0.08em" }}>
        CASE STUDY · COVER IMAGE
      </div>
    </div>
  );
}

function OperatorPreview() {
  return (
    <div style={{ height: "100%", padding: "8% 10%", background: "#0e1420", color: "#f0ede5", fontFamily: "Instrument Sans, sans-serif" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "5%" }}>
        <div style={{ fontFamily: "Newsreader, serif", fontSize: "min(2.4vw, 22px)" }}>Maya Okonkwo</div>
        <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "oklch(0.62 0.14 40)" }}>● RAISING SEED</div>
      </div>
      <div style={{ fontSize: "min(4vw, 48px)", fontFamily: "Newsreader, serif", lineHeight: 1, marginBottom: 24 }}>
        Building infrastructure for the LLM ops decade.
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 32, marginTop: "5%", paddingTop: 24, borderTop: "0.5px solid rgba(255,255,255,0.18)" }}>
        {[["3.2k", "GitHub stars"], ["11k", "Newsletter"], ["3", "Retainer clients"]].map(([n, l], i) => (
          <div key={i}>
            <div style={{ fontFamily: "Newsreader, serif", fontSize: "min(3vw, 32px)" }}>{n}</div>
            <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 10, letterSpacing: "0.12em", color: "rgba(240,237,229,0.6)", textTransform: "uppercase" }}>{l}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function AcademicPreview() {
  return (
    <div style={{ height: "100%", padding: "8% 12%", background: "#fdfbf6", fontFamily: "Newsreader, serif", color: "#1a1814" }}>
      <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, letterSpacing: "0.12em", color: "#a09889", marginBottom: 16 }}>DR. ELLIS TANAKA · BROAD INSTITUTE</div>
      <div style={{ fontSize: "min(3.6vw, 40px)", lineHeight: 1.05, marginBottom: 16 }}>Computational biologist · machine learning for protein engineering.</div>
      <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 10, letterSpacing: "0.08em", color: "#a09889", marginTop: 24, marginBottom: 8 }}>SELECTED PUBLICATIONS</div>
      <div style={{ fontSize: 14, color: "#3a3530", lineHeight: 1.5 }}>Tanaka, E. <em>et al.</em> Flow-matching for de novo binder design. <em>Nature Methods</em>, in review (2026).</div>
      <div style={{ fontSize: 14, color: "#3a3530", lineHeight: 1.5 }}>Tanaka, E. & Park, J. The geometry of protein interfaces. <em>PNAS</em> (2024).</div>
    </div>
  );
}

// ── Domain tease ───────────────────────────────────────────────────────────

function DomainTease() {
  const [q, setQ] = React.useState("yourname");
  const tlds = [".com", ".dev", ".ai", ".studio", ".io", ".work"];
  return (
    <section style={{ padding: "var(--space-9) 0", borderBottom: "0.5px solid var(--rule)" }}>
      <div className="container-narrow" style={{ textAlign: "center" }}>
        <div className="eyebrow" style={{ marginBottom: 20 }}>§ 06 · DOMAINS, NOT SUBDOMAINS</div>
        <h2 style={{ fontSize: "clamp(40px, 5.4vw, 80px)", lineHeight: 1, letterSpacing: "-0.025em", marginBottom: 24 }}>
          Land somewhere<br/>that's <em style={{ fontStyle: "italic", color: "var(--accent)" }}>actually yours.</em>
        </h2>
        <p style={{ fontFamily: "var(--font-serif)", fontSize: 22, color: "var(--ink-2)", lineHeight: 1.5, marginBottom: 48 }}>
          We register the domain, configure DNS, provision SSL, and point it at your portfolio — in one checkout. Or bring your own.
        </p>

        <div style={{
          display: "flex",
          maxWidth: 600,
          margin: "0 auto",
          border: "0.5px solid var(--rule-2)",
          borderRadius: 999,
          overflow: "hidden",
          background: "var(--paper)",
        }}>
          <input
            value={q}
            onChange={e => setQ(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ""))}
            style={{
              flex: 1,
              border: 0,
              padding: "18px 24px",
              fontFamily: "var(--font-mono)",
              fontSize: 18,
              background: "transparent",
              color: "var(--ink)",
              outline: "none",
            }}
          />
          <a href="#/goal" className="btn btn-primary" style={{ borderRadius: 0, padding: "0 28px" }}>
            Search domains <span className="arr">→</span>
          </a>
        </div>

        <div style={{ display: "flex", gap: 14, justifyContent: "center", marginTop: 24, flexWrap: "wrap" }}>
          {tlds.map(t => (
            <div key={t} className="chip mono">
              {q || "yourname"}<span style={{ color: "var(--accent)" }}>{t}</span>
              <span style={{ color: "var(--ink-4)", marginLeft: 4 }}>${window.TLD_PRICES[t]}/yr</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Pricing ────────────────────────────────────────────────────────────────

function PricingTease() {
  return (
    <section id="pricing" style={{ padding: "var(--space-9) 0", borderBottom: "0.5px solid var(--rule)" }}>
      <div className="container">
        <div style={{ marginBottom: 64 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>§ 07 · PRICING</div>
          <h2 style={{ fontSize: "clamp(40px, 4.8vw, 64px)", lineHeight: 1, letterSpacing: "-0.025em", maxWidth: "20ch" }}>
            Three tiers. No add-ons.<br/><em style={{ fontStyle: "italic", color: "var(--accent)" }}>No upsells.</em>
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24 }}>
          <PricingCard tier="Free" price="$0" sub="Forever" features={[
            "name.quickfolio.live subdomain",
            "Auto-generated portfolio",
            "Manual updates",
            "Single design",
            "Folio watermark in footer",
          ]} cta="Start free"/>
          <PricingCard tier="Pro" price="$99" sub="per year" featured features={[
            "Custom .com / .dev / .io domain",
            "Hosting + SSL included",
            "Auto-update from GitHub",
            "All five designs",
            "Light AI editing (chat + inline)",
            "Health score & analytics",
            "No watermark",
          ]} cta="Start Pro"/>
          <PricingCard tier="Studio" price="$199" sub="per year" features={[
            "Everything in Pro",
            "Custom domain email (you@yours.com)",
            "Premium TLDs (.ai, .studio, .design)",
            "Multiple positioning profiles",
            "Priority publish queue",
            "Lead capture forms",
            "Removable Folio attribution",
          ]} cta="Start Studio"/>
        </div>

        <div style={{ marginTop: 32, textAlign: "center", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", color: "var(--ink-3)" }}>
          ALL PLANS · 14-DAY MONEY BACK · CANCEL ANY TIME · DOMAIN STAYS WITH YOU
        </div>
      </div>
    </section>
  );
}

function PricingCard({ tier, price, sub, features, cta, featured }) {
  return (
    <div style={{
      padding: "var(--space-6)",
      border: featured ? "1px solid var(--ink)" : "0.5px solid var(--rule)",
      borderRadius: "var(--radius-lg)",
      background: featured ? "var(--ink)" : "var(--paper)",
      color: featured ? "var(--paper)" : "var(--ink)",
      position: "relative",
      transition: "transform 200ms ease, box-shadow 200ms ease",
    }}
    onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 20px 40px -16px rgba(0,0,0,0.2)"; }}
    onMouseLeave={e => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; }}
    >
      {featured && (
        <div style={{
          position: "absolute",
          top: -10,
          left: 24,
          padding: "3px 10px",
          background: "var(--accent)",
          color: "var(--paper)",
          fontFamily: "var(--font-mono)",
          fontSize: 10,
          letterSpacing: "0.12em",
          borderRadius: 999,
        }}>
          MOST POPULAR
        </div>
      )}
      <div className="eyebrow" style={{ color: featured ? "rgba(253,251,246,0.6)" : "var(--ink-3)", marginBottom: 14 }}>{tier}</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 28 }}>
        <span style={{ fontFamily: "var(--font-serif)", fontSize: 56, lineHeight: 1, letterSpacing: "-0.02em" }}>{price}</span>
        <span style={{ fontSize: 14, color: featured ? "rgba(253,251,246,0.6)" : "var(--ink-3)" }}>/ {sub}</span>
      </div>
      <ul style={{ listStyle: "none", padding: 0, margin: "0 0 28px", display: "flex", flexDirection: "column", gap: 10 }}>
        {features.map((f, i) => (
          <li key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: 14, lineHeight: 1.5, color: featured ? "rgba(253,251,246,0.86)" : "var(--ink-2)" }}>
            <Icon name="check" size={14} stroke={1.5} style={{ flexShrink: 0, marginTop: 4, color: featured ? "var(--accent-soft)" : "var(--accent)" }}/>
            {f}
          </li>
        ))}
      </ul>
      <a href="#/goal" className={featured ? "btn btn-accent" : "btn btn-ghost"} style={{ width: "100%", justifyContent: "center" }}>
        {cta} <span className="arr">→</span>
      </a>
    </div>
  );
}

// ── Testimonials ───────────────────────────────────────────────────────────

function Testimonials() {
  const quotes = [
    { q: "I've been meaning to redo my site for two years. Folio shipped one in twelve minutes that's better than what I would have written.", who: "Priya Anand", role: "Founding Engineer, Plover" },
    { q: "Picking from three drafts is so much easier than starting from blank. I changed two sentences and pressed publish.", who: "Mateo Soriano", role: "Product Designer" },
    { q: "The auto-update from GitHub is the killer feature. My portfolio is finally not three years out of date.", who: "Hana Koba", role: "ML Researcher" },
  ];
  return (
    <section style={{ padding: "var(--space-9) 0", borderBottom: "0.5px solid var(--rule)" }}>
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: 56 }}>§ 08 · WHAT PEOPLE SAY</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 32 }}>
          {quotes.map((q, i) => (
            <figure key={i} style={{ margin: 0 }}>
              <div style={{ fontFamily: "var(--font-serif)", fontSize: 56, lineHeight: 0.5, color: "var(--accent)", height: 24 }}>"</div>
              <blockquote style={{
                fontFamily: "var(--font-serif)",
                fontSize: 22,
                lineHeight: 1.4,
                color: "var(--ink)",
                margin: "0 0 24px",
              }}>
                {q.q}
              </blockquote>
              <figcaption style={{ borderTop: "0.5px solid var(--rule)", paddingTop: 14 }}>
                <div style={{ fontWeight: 500 }}>{q.who}</div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.04em", color: "var(--ink-3)" }}>{q.role}</div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Final CTA ──────────────────────────────────────────────────────────────

function FinalCTA() {
  return (
    <section style={{ padding: "var(--space-10) 0" }}>
      <div className="container-narrow" style={{ textAlign: "center" }}>
        <div className="eyebrow" style={{ marginBottom: 24 }}>FIN.</div>
        <h2 style={{ fontSize: "clamp(56px, 8vw, 120px)", lineHeight: 0.95, letterSpacing: "-0.03em", marginBottom: 28 }}>
          Stop building.<br/>
          <em style={{ fontStyle: "italic", color: "var(--accent)" }}>Start shipping.</em>
        </h2>
        <p style={{ fontFamily: "var(--font-serif)", fontSize: 22, color: "var(--ink-2)", lineHeight: 1.5, marginBottom: 40 }}>
          Most people in your field already have a portfolio they're embarrassed by. <br/>You're about to have one you'll send unprompted.
        </p>
        <a href="#/goal" className="btn btn-primary" style={{ fontSize: 16, padding: "18px 32px" }}>
          Build my portfolio <span className="arr">→</span>
        </a>
        <div style={{ marginTop: 24, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", color: "var(--ink-3)" }}>
          PREVIEW IS FREE · FOURTEEN DAY MONEY BACK
        </div>
      </div>
    </section>
  );
}

window.Landing = Landing;