// VibeAlchemy Marketing · Landing page
function LandingPage() {
  return (
    <div className="page landing-page">
      {/* ─── HERO ───────────────────────────────────────────────────── */}
      <section className="hero">
        <div className="wrap">
          <div className="hero-grid">
            <div>
              <span className="hero-eyebrow">
                <span className="pulse"></span>
                {window.PRIVATE_BETA !== false
                  ? 'Private beta · invitation only · founding pricing held for invitees'
                  : 'Founding offer · First 100 paying customers — 50% off year 1'}
              </span>
              <h1 className="h1 serif">Validation that gets you to <em className="italic" style={{ color: 'var(--gold)' }}>the idea worth building.</em></h1>
              <p className="lede hero-sub">12 agents research it, argue with it, and pivot it when it cracks. You leave with a verdict you can defend, every claim sourced. Even if the idea isn't the one you walked in with.</p>
              {window.PRIVATE_BETA !== false ? (
                <a className="btn btn-primary btn-lg" href="#" onClick={(e) => { e.preventDefault(); openWaitlist({ source: 'marketing' }); }}>Join the private beta →</a>
              ) : (
                <a className="btn btn-primary btn-lg" href="/login.html">Start free →</a>
              )}
              <div className="hero-microcopy">
                {window.PRIVATE_BETA !== false ? (
                  <>
                    <span>Invite-only beta</span>
                    <span>Reply in a few days</span>
                  </>
                ) : (
                  <>
                    <span>Free Spark tier</span>
                    <span>No card</span>
                  </>
                )}
              </div>
            </div>
            <div>
              <MemoArtifact />
            </div>
          </div>
        </div>
      </section>

      {/* ─── TRUST STRIP ────────────────────────────────────────────── */}
      <TrustStrip />

      {/* ─── THE PROBLEM ────────────────────────────────────────────── */}
      <Section eyebrow="THE PROBLEM" headline="Real validation takes weeks. Most founders skip it.">
        <div className="col-2" style={{ alignItems: 'flex-start' }}>
          <div className="body" style={{ fontSize: 17, lineHeight: 1.6 }}>
            <p>Done right, it takes a month: market sizing, customer research, competitive landscape, risk analysis, stress-testing the business model. Done wrong, it misses the assumption that actually kills the idea.</p>
            <p>So most founders skip it, and build something the market was always going to reject. The ones who don't lose a month they could have spent shipping.</p>
          </div>
          <div>
            <div className="stat-band">
              <span className="stat-num">~43%</span>
              <div className="stat-text">
                of VC-backed startups fail due to poor product-market fit.
                <span className="src">
                  <a className="link" href="https://www.cbinsights.com/research/report/startup-failure-reasons-top/" target="_blank" rel="noopener noreferrer">CB Insights · 2024 study (431 VC-backed failures since 2023) →</a>
                </span>
              </div>
            </div>
          </div>
        </div>
      </Section>

      {/* ─── PIPELINE ───────────────────────────────────────────────── */}
      <Section
        eyebrow="THE PIPELINE"
        headline="Built like a strategy team would run it. In an afternoon, not a quarter."
        bg
      >
        <div className="pipeline" style={{ marginTop: 24 }}>
          {[
            { n: '01', name: 'Frame', icon: StageIcons.Frame, desc: 'Lock the opportunity: who, what, and why now.' },
            { n: '02', name: 'Research', icon: StageIcons.Research, desc: 'Find the customers and what they actually want.' },
            { n: '03', name: 'Analyse', icon: StageIcons.Analyse, desc: 'Size the market, score the moat, work out the unit economics.' },
            { n: '04', name: 'Challenge', icon: StageIcons.Challenge, desc: 'Three skeptics try to break the idea before you do.' },
            { n: '05', name: 'Decide', icon: StageIcons.Decide, desc: 'A clear verdict, with the reasoning you can defend.' },
          ].map((s) => (
            <div className="stage-cell" key={s.n}>
              <div className="stage-num">{s.n}</div>
              <div className="stage-icon">{s.icon}</div>
              <div className="stage-name">{s.name}</div>
              <div className="stage-desc">{s.desc}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 56, textAlign: 'center' }}>
          <a className="btn" onClick={(e) => go('/how-it-works', e)}>The full pipeline, stage by stage →</a>
        </div>
      </Section>

      {/* ─── WHAT YOU GET ───────────────────────────────────────────── */}
      <Section
        eyebrow="WHAT YOU ACTUALLY GET"
        headline="Not a dashboard. A stack of documents."
        sub="Each one stands on its own. Share it, defend it, take it to your next conversation."
      >
        <div className="col-4">
          {[
            { title: 'Decision Memo', body: 'The verdict, the score, the riskiest assumption, and what to do next.', kind: 'memo' },
            { title: 'Market Intelligence', body: 'Bottoms-up market sizing, who\'s already in it, what would defend you, what would pay.', kind: 'market' },
            { title: 'Red Team Report', body: 'Three skeptics, three angles, three failure modes you need to answer.', kind: 'red' },
            { title: 'Pivot Map', body: "When the verdict isn't a clean Pursue, the stronger angles adjacent to your idea.", kind: 'pivot' },
          ].map((d, i) => (
            <div className="surface surface-clickable deliverable" key={i} onClick={(e) => go('/examples', e)}>
              <div>
                <div className="eyebrow gold" style={{ marginBottom: 8 }}>{`Doc ${String(i + 1).padStart(2, '0')}`}</div>
                <h4 className="serif" style={{ fontFamily: 'var(--serif)', fontSize: 24, letterSpacing: '-0.01em', color: 'var(--parchment)' }}>{d.title}</h4>
              </div>
              <p className="body" style={{ fontSize: 14, lineHeight: 1.5, margin: 0 }}>{d.body}</p>
              <DocPreview kind={d.kind} />
              <a className="example-link" onClick={(e) => go('/examples', e)}>See sample →</a>
            </div>
          ))}
        </div>
      </Section>

      {/* ─── BUILT FOR ─────────────────────────────────────────────── */}
      <Section
        eyebrow="BUILT FOR FOUNDERS"
        headline="For the founder who'd rather hear 'no' now than 'why didn't I see this' in 6 months."
        sub="Three archetypes. Same engine. What it does for each."
      >
        <div className="col-3">
          {[
            {
              label: 'Solo founder',
              title: "Exploring an idea you haven't shown anyone yet.",
              body: "You don't have a co-founder to argue with. The Red Team is the closest thing.",
            },
            {
              label: 'First-time founder',
              title: 'Serious about your first venture.',
              body: "You haven't built the muscle for what kills startups. The memo names it for you.",
            },
            {
              label: 'Pivoting founder',
              title: "Figuring out the next angle after the current one didn't work.",
              body: "You know what didn't work. The Pivot Map shows the adjacent angles worth running.",
            },
          ].map((a, i) => (
            <div className="archetype surface-clickable" key={i} onClick={(e) => go('/for-founders', e)} style={{ cursor: 'pointer' }}>
              <div className="archetype-label">{a.label}</div>
              <div className="archetype-title">{a.title}</div>
              <p className="body" style={{ margin: 0, fontSize: 14 }}>{a.body}</p>
              <a className="link" style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 'auto', paddingTop: 14, display: 'inline-block', alignSelf: 'flex-start' }} onClick={(e) => go('/for-founders', e)}>See more →</a>
            </div>
          ))}
        </div>

        {/* All-In as graduated next step */}
        <div
          className="surface surface-clickable"
          style={{
            marginTop: 36,
            padding: '24px 28px',
            display: 'grid',
            gridTemplateColumns: 'auto 1fr auto',
            gap: 22,
            alignItems: 'center',
            borderLeft: '3px solid var(--gold)',
          }}
          onClick={(e) => go('/for-all-in', e)}
        >
          <span className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--gold)', textTransform: 'uppercase' }}>NEXT STEP · ALL-IN</span>
          <div>
            <div style={{ fontSize: 16, color: 'var(--parchment)', fontFamily: 'var(--serif)', fontStyle: 'italic', marginBottom: 4 }}>Going all-in on one idea?</div>
            <p className="body" style={{ margin: 0, fontSize: 14 }}>Stack All-In on top — investor framing, verifier pass, source citations, share blind with VCs.</p>
          </div>
          <a className="link" style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', whiteSpace: 'nowrap' }} onClick={(e) => go('/for-all-in', e)}>See All-In →</a>
        </div>
      </Section>

      {/* ─── COMPARE ────────────────────────────────────────────────── */}
      <Section
        eyebrow="WHY THIS IS DIFFERENT"
        headline="Other tools grade the idea you brought. This one helps you find the idea worth building."
        sub="Single-pass validators score what you typed in 60 seconds. Chat tools agree with whatever you ask. Both assume your first idea is the right one. It usually isn't."
        bg
      >
        <div className="compare">
          {[
            { name: 'VibeAlchemy', sub: 'Multi-perspective deliberation', us: true },
            { name: 'Single-pass validators', sub: 'A score in 60 seconds' },
            { name: 'Prompt + chat', sub: 'ChatGPT, Claude in a chat window' },
            { name: 'Skills + agents', sub: 'A SKILL.md doc + a general agent' },
          ].map((c, i) => {
            const rows = [
              [
                'Pivots, re-frames, re-runs the case on the sharper version',
                'Rewrite the input. Pay for the report again.',
                'Start a new chat. Lose the thread.',
                'No memory of the prior idea. Starts from zero.',
              ],
              [
                'A stack of documents you can share and defend',
                'A dashboard score and a few bullets',
                'A chat thread that drifts off topic',
                'Whatever the agent decided to focus on — no standard output',
              ],
              [
                'Three skeptics try to break it before you do',
                'Optimizes for the upgrade button — your idea scores 74/100',
                'Agrees with you. LLMs are trained to please',
                'One agent has to play both skeptic and proponent — dissonance, not deliberation',
              ],
              [
                'Same structured output every time',
                'Varies — same idea can score 60 one day and 80 another',
                'Prompt-dependent. Same idea, different answer next time',
                'Agent picks angles, depth, and when to stop — different every run',
              ],
              [
                'Every claim ties back to a source — share the memo, defend the call',
                'Hard to defend from a screenshot of a 74',
                'Cannot share a chat as a decision',
                'No enforced citations. No audit trail.',
              ],
            ];
            const kickers = ['When the idea changes mid-validation', 'What you get', 'How it handles a bad idea', 'Consistency', 'Defensibility'];
            return (
              <div className={`compare-col ${c.us ? 'us' : ''}`} key={i}>
                <div className="compare-head">
                  <h4>{c.name}</h4>
                  <div className="compare-sub">{c.sub}</div>
                </div>
                {rows.map((r, j) => (
                  <div className="compare-row" key={j}>
                    <div className="compare-row-kicker">{kickers[j]}</div>
                    <div className="compare-row-body">{r[i]}</div>
                  </div>
                ))}
              </div>
            );
          })}
        </div>
        <div style={{ textAlign: 'center', marginTop: 32 }}>
          <span className="mono mute2" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
            Full breakdown vs{' '}
            <a className="link" onClick={(e) => go('/compare/preuve', e)} style={{ cursor: 'pointer' }}>Preuve</a>
            {' · '}
            <a className="link" onClick={(e) => go('/compare/ideaproof', e)} style={{ cursor: 'pointer' }}>IdeaProof</a>
            {' · '}
            <a className="link" onClick={(e) => go('/compare/validatorai', e)} style={{ cursor: 'pointer' }}>ValidatorAI</a>
            {' →'}
          </span>
        </div>
      </Section>

      {/* ─── BUILT BY ───────────────────────────────────────────────── */}
      <Section eyebrow="BUILT BY" headline="An AI researcher who got tired of watching good ideas die in planning docs.">
        <div className="founder-strip">
          <div className="founder-avatar">M</div>
          <div>
            <p className="body" style={{ fontSize: 16, lineHeight: 1.6, marginBottom: 14 }}>
              Built PyTorch Tabular. Wrote a Packt-published book that ML teams at Amazon and Microsoft use. Now applying that same rigor to the part of building startups that usually gets done badly.
            </p>
            <div className="pull-quote">
              "Most validation tools agree with you. That's confirmation bias with extra steps."
              <span className="who">Manu · founder</span>
            </div>
            <a className="link" onClick={(e) => go('/about', e)} style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Full story →</a>
          </div>
          <div className="founder-stats">
            <a className="founder-stat" href="https://github.com/pytorch-tabular" target="_blank" rel="noopener noreferrer">
              <div className="founder-stat-num">1.6k</div>
              <div className="founder-stat-label">GitHub stars · PyTorch Tabular</div>
            </a>
            <a className="founder-stat" href="https://scholar.google.com/citations?hl=en&user=oycu9JcAAAAJ" target="_blank" rel="noopener noreferrer">
              <div className="founder-stat-num">6 + 2</div>
              <div className="founder-stat-label">Papers · Patents (peer-reviewed)</div>
            </a>
            <a className="founder-stat" href="https://amzn.in/d/0fGALQfj" target="_blank" rel="noopener noreferrer">
              <div className="founder-stat-num">2nd</div>
              <div className="founder-stat-label">Book edition · Packt</div>
            </a>
          </div>
        </div>
      </Section>

      {/* ─── PRICING TEASER ─────────────────────────────────────────── */}
      <Section
        eyebrow="PRICING"
        headline={window.PRIVATE_BETA !== false ? 'Pricing held for beta invitees.' : 'Start free. Lock in 50% off year 1 as a founding member.'}
        sub={window.PRIVATE_BETA !== false
          ? "We're in private beta. Pricing is shown so you know what you're walking into — checkout opens once you're invited."
          : 'First 100 paying customers lock in 50% off year 1 across every paid tier. Spark stays free either way.'}
        bg
      >
        <PricingCards teaser />
        <div style={{ textAlign: 'center', marginTop: 32 }}>
          <a className="link" onClick={(e) => go('/pricing', e)} style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Compare full features across tiers →</a>
        </div>
      </Section>

      {/* ─── FAQ TEASER ─────────────────────────────────────────────── */}
      <Section eyebrow="FAQ" headline="Questions founders ask before they trust the engine." narrow>
        <FAQAccordion items={LANDING_FAQ} />
        <div style={{ textAlign: 'center', marginTop: 28 }}>
          <a className="link" onClick={(e) => go('/faq', e)} style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase' }}>See all questions →</a>
        </div>
      </Section>

      {/* ─── FINAL CTA ──────────────────────────────────────────────── */}
      <FinalCTA />
    </div>
  );
}

const LANDING_FAQ = [
  {
    q: 'Is it live now?',
    a: "We're in private beta. The full pipeline (Spark, Validate, Founder, All-In) is built and running — we're inviting founders in small batches so we can support each one properly. Request access to get on the list.",
  },
  {
    q: 'What does requesting access commit me to?',
    a: "Nothing. Drop your email and where you are with your idea — we invite people as capacity opens up. No card, no payment. When you're invited, you'll get founding-member pricing on any paid tier.",
  },
  {
    q: 'Will it actually kill bad ideas?',
    a: "Yes — by design. We're built to find what would break the idea before you do. But a Rethink verdict isn't the end. Every Pivot or Rethink comes with a Pivot Map — the stronger angles adjacent to your original, ranked. The Rethink is the first step, not the last.",
  },
  {
    q: 'How is this different from ChatGPT, Preuve, IdeaProof?',
    a: 'Three things: multi-perspective debate instead of one model agreeing with you, three adversarial skeptics whose job is to break the idea, and a structured Decision Memo you can defend to a co-founder or investor. See the full comparison above.',
  },
  {
    q: 'Will the founding-member price hold after launch?',
    a: "Yes — for the first 100 paying customers. The 50% off applies to year 1 on any paid tier (Validate, Founder, All-In), and we'll honor the same rate on renewal. Spark is free either way; upgrade within the founding-100 window to lock the discount.",
  },
];

window.LandingPage = LandingPage;