// VibeAlchemy Marketing · Examples + Inner pages

// ─── EXAMPLES ─────────────────────────────────────────────────────────────
const EXAMPLES = [
  {
    slug: 'voice-ai-dental',
    num: 'CASE 01',
    name: 'Voice AI receptionist for independent dental practices',
    verdict: 'Sharpen', cls: 'cond',
    score: 72,
    summary: 'Real demand, defensible if payer integrations close fast.',
  },
  {
    slug: 'creator-tax-tool',
    num: 'CASE 02',
    name: 'Tax prep platform for full-time creators',
    verdict: 'Pivot', cls: 'pivot',
    score: 58,
    summary: 'Customer love → wrong wedge. Pivot Map surfaces 2 stronger angles.',
  },
  {
    slug: 'ai-knowledge-base',
    num: 'CASE 03',
    name: 'AI knowledge base for product teams',
    verdict: 'Rethink', cls: 'kill',
    score: 34,
    summary: 'Crowded category, no defensible angle, broken unit economics.',
  },
];

function ExamplesPage() {
  return (
    <div className="page examples-page">
      <PageHero
        eyebrow="EXAMPLES"
        headline="Real reports from real ideas."
        sub="Decide for yourself."
      />
      <section className="section-tight">
        <div className="wrap">
          <div className="col-3">
            {EXAMPLES.map((c) => (
              <div className="example-card" key={c.slug} onClick={(e) => go(`/examples/${c.slug}`, e)}>
                <div>
                  <div className="example-num">{c.num}</div>
                  <h3 className="example-name" style={{ marginTop: 10 }}>{c.name}</h3>
                </div>
                <span className={`memo-verdict-pill ${c.cls}`} style={{ alignSelf: 'flex-start' }}>{c.verdict}</span>
                <p className="body italic serif" style={{ fontSize: 17, lineHeight: 1.4 }}>"{c.summary}"</p>
                <div className="example-score-row">
                  <div>
                    <div className="mono mute2" style={{ fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase' }}>Composite</div>
                    <div className="example-score-num">{c.score}<span className="mono" style={{ fontSize: 12, color: 'var(--stone)', marginLeft: 4 }}>/ 100</span></div>
                  </div>
                  <a className="example-link">See sample →</a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Section bg narrow>
        <h3 className="h3 serif" style={{ textAlign: 'center' }}>The verdict spread is the point.</h3>
        <p className="lede" style={{ textAlign: 'center', margin: '14px auto 0' }}>Sharpen · Pivot · Rethink. A fair sample of what the engine produces. A page of three Pursue verdicts would read like flattery. The Rethink is the credibility lever.</p>
      </Section>

      <FinalCTA headline="Be one of the first 100 paying customers." sub="50% off year 1, on every paid tier. Free first run on Spark." />
    </div>
  );
}

// ─── EXAMPLE DETAIL (light-weight read-only chrome) ───────────────────────
function ExampleDetailPage({ slug }) {
  const c = EXAMPLES.find((e) => e.slug === slug) || EXAMPLES[0];
  const idx = EXAMPLES.findIndex((e) => e.slug === c.slug);
  const next = EXAMPLES[(idx + 1) % EXAMPLES.length];
  return (
    <div className="page examples-page">
      {/* Marketing banner */}
      <div style={{ padding: '12px 32px', background: 'var(--gold-soft)', borderBottom: '1px solid var(--gold-line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'var(--gold)' }}>
          ▴ SAMPLE · {c.num} · {c.name} · {c.verdict}
        </div>
        {window.PRIVATE_BETA !== false
          ? <a className="btn btn-primary btn-sm" href="#" onClick={(e) => { e.preventDefault(); openWaitlist({ source: 'marketing' }); }}>Request access →</a>
          : <a className="btn btn-primary btn-sm" href="/login.html">Start free →</a>}
      </div>

      <section className="section-tight">
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 12 }}>{c.num}</div>
          <h1 className="h2 serif" style={{ marginBottom: 18 }}>{c.name}</h1>

          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32, marginTop: 32, alignItems: 'flex-start' }}>
            <div>
              <MemoArtifact
                verdict={c.cls}
                verdictLabel={c.verdict}
                score={c.score}
                title="Decision Memo · Anonymized"
                meta={`${c.num} · Run · Live read-only view`}
                insight={c.summary}
              />
              <p className="body" style={{ marginTop: 18, fontSize: 13 }}>Tutorial overlays walk you through each block. Click through, skip, or dismiss to explore freely.</p>
            </div>
            <div className="stack stack-md">
              <div className="surface" style={{ padding: 22 }}>
                <div className="eyebrow gold" style={{ marginBottom: 10 }}>POPOVER 1 OF 5</div>
                <h4 className="h4">↑ The verdict pill</h4>
                <p className="body" style={{ fontSize: 13, marginTop: 8 }}>{c.cls === 'kill' ? 'A Rethink verdict means the engine could not find an angle that survives all three skeptics. Continue reading for the Pivot Map.' : c.cls === 'pivot' ? 'The wedge is wrong; the underlying customer love is real. Pivot Map proposes 2 adjacent angles.' : 'Sharpen. The idea survives, but one assumption needs to be true. Verify before raising.'}</p>
              </div>
              <div className="surface" style={{ padding: 22 }}>
                <div className="eyebrow gold" style={{ marginBottom: 10 }}>POPOVER 2 OF 5</div>
                <h4 className="h4">↑ The riskiest assumption</h4>
                <p className="body" style={{ fontSize: 13, marginTop: 8 }}>The one belief that, if wrong, breaks the verdict. Every memo names it. Open the Assumption Ledger for the full list.</p>
              </div>
              <div className="surface" style={{ padding: 22 }}>
                <div className="eyebrow gold" style={{ marginBottom: 10 }}>POPOVER 3 OF 5</div>
                <h4 className="h4">↑ Red Team objections</h4>
                <p className="body" style={{ fontSize: 13, marginTop: 8 }}>Three structural skeptics, each looking for what would break the idea. Read the Report for the full objections and what each one needs in response.</p>
              </div>
              <div className="row" style={{ gap: 10, marginTop: 4 }}>
                <a className="btn btn-sm" onClick={(e) => e.preventDefault()}>← Skip overlays</a>
                <a className="btn btn-primary btn-sm" onClick={(e) => e.preventDefault()}>Next →</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Persistent footer */}
      <div style={{ position: 'sticky', bottom: 0, padding: '14px 32px', background: 'var(--obsidian-2)', borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap', zIndex: 10 }}>
        <a onClick={(e) => go('/examples', e)} className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'var(--stone)', borderBottom: 0, cursor: 'pointer' }}>← Back to examples</a>
        <a onClick={(e) => go(`/examples/${next.slug}`, e)} className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'var(--stone)', borderBottom: 0, cursor: 'pointer' }}>Next case: {next.name.split(' for ')[0]} →</a>
        {window.PRIVATE_BETA !== false
          ? <a className="btn btn-primary btn-sm" href="#" onClick={(e) => { e.preventDefault(); openWaitlist({ source: 'marketing' }); }}>Request access →</a>
          : <a className="btn btn-primary btn-sm" href="/login.html">Start free →</a>}
      </div>
    </div>
  );
}

// ─── ABOUT ────────────────────────────────────────────────────────────────
function AboutPage() {
  return (
    <div className="page about-page">
      <PageHero eyebrow="ABOUT" headline="Built by." />

      <section className="section-tight">
        <div className="wrap">
          <div className="founder-strip">
            <div className="founder-avatar">M</div>
            <div>
              <h3 className="h3 serif" style={{ marginBottom: 10 }}>Manu Joseph</h3>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: 'var(--stone)', textTransform: 'uppercase', marginBottom: 18 }}>AI Researcher · 15+ years of ML at scale</div>
              <p className="body" style={{ fontSize: 16, lineHeight: 1.6 }}>
                An AI researcher who got tired of watching good ideas die in planning docs. 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>
            <div className="founder-stats">
              <div className="founder-stat">
                <div className="founder-stat-num">1.6k</div>
                <div className="founder-stat-label">GitHub stars · PyTorch Tabular</div>
              </div>
              <div className="founder-stat">
                <div className="founder-stat-num">6 + 2</div>
                <div className="founder-stat-label">Papers · Patents</div>
              </div>
              <div className="founder-stat">
                <div className="founder-stat-num">2nd</div>
                <div className="founder-stat-label">Book edition · Packt</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Section eyebrow="WHY I BUILT THIS" narrow bg>
        <div className="serif italic" style={{ fontSize: 24, lineHeight: 1.5, color: 'var(--parchment)' }}>
          <p>"I spent 15 years building ML systems at scale, work that lived or died on rigor. The rigor production ML demands rarely makes it into how founders evaluate their own ideas.</p>
          <p>I kept watching good ideas die in planning docs and bad ideas survive long enough to consume two years of someone's life. The validation tools I tried either flattered every idea or summarized a market without ever finding the assumption that would kill it. So I built the system I wished I'd had. Adversarial by design. Structured to produce an artifact a founder could defend."</p>
        </div>
      </Section>

      <Section eyebrow="WHAT WE BELIEVE" headline="Three principles.">
        <div className="col-3">
          {[
            { n: '01', h: 'Honest verdicts beat flattering scores.', b: 'A 74/100 that nobody trusts is worth less than a Rethink verdict that saves you a year.' },
            { n: '02', h: 'The artifact matters more than the dashboard.', b: 'You can\'t take a screenshot of a score into a partner meeting. You can take a Decision Memo.' },
            { n: '03', h: 'Depth beats speed when the stakes are real.', b: 'Most decisions worth making are decisions worth taking 15 minutes on.' },
          ].map((p) => (
            <div className="surface" style={{ padding: 28 }} key={p.n}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--gold)', marginBottom: 14 }}>{p.n}</div>
              <h4 className="h4 serif" style={{ fontFamily: 'var(--serif)', fontSize: 24, marginBottom: 12 }}>{p.h}</h4>
              <p className="body" style={{ fontSize: 14 }}>{p.b}</p>
            </div>
          ))}
        </div>
      </Section>

      <FinalCTA headline="Built with the rigor that ML at scale demands." sub="Free first run. First 100 paying customers lock in 50% off year 1." />
    </div>
  );
}

// ─── FAQ ──────────────────────────────────────────────────────────────────
const FAQ_GROUPS = [
  {
    name: 'Product', items: [
      ['What is VibeAlchemy?', 'A multi-perspective validation engine for early-stage ideas. Twelve specialist perspectives debate the idea in parallel and in sequence; three of them are skeptics whose only job is to break it. The output is a Decision Memo you can defend.'],
      ['How is it different from competitors?', 'Three things: multi-perspective debate instead of one model agreeing with you, three structurally adversarial skeptics, and a defensible artifact rather than a dashboard score.'],
      ['Will it kill bad ideas?', "Yes — by design. A Rethink verdict isn't the end. Every Pivot or Rethink comes with a Pivot Map — the stronger adjacent angles, ranked."],
      ['Can I argue with the verdict?', "Yes. You can re-run from any stage with edits, run a pivot, or push back on the Red Team's objections with new evidence. Re-runs use the same engine with your new inputs."],
      ['Is this for ideas at any stage?', 'Best for pre-seed to seed-stage ideas where the question is still whether to build it. Not designed for already-shipping products.'],
      ['What size of idea is this for?', 'Anything serious enough that 15 minutes of structured analysis is worth doing. Side projects to venture-scale.'],
    ],
  },
  {
    name: 'Pipeline & runs', items: [
      ['How long does a run take?', '~ 12 minutes end-to-end in Autonomous mode. Guided mode is similar plus the time you spend on steering check-ins.'],
      ['Can I edit mid-run?', 'Yes — at each Guided check-in (Founder and up). Edits propagate downstream so later stages reason from your correction, not the original inference. Autonomous mode still pauses for safety check-ins (framing confirm, drift detection).'],
      ['Re-runs? Pivot re-runs?', "Yes on Validate and up. Re-run from any stage with edits. Pivot re-runs apply one of the adjacent angles from the Pivot Map as the new framing."],
      ["What if my idea is in a niche we don't know well?", "The engine grounds itself with public research at the Research stage — so niche markets work as long as there's public signal. Vertical-specific Red Team personas are on the roadmap."],
      ['Can I keep my idea private?', "Yes. Run data isn't used for training and isn't accessible to anyone other than you. Investor share mode (All-In) lets you share a memo without revealing your identity."],
    ],
  },
  {
    name: 'Outputs', items: [
      ['What format is the Decision Memo?', 'A long-form structured document — verdict, key insight, riskiest assumption, full reasoning, with cited evidence from underlying sources. Designed to read like a partner-written memo at a fund. Inline [N] citations appear on the All-In Investor Memo variant.'],
      ['Can I export?', 'PDF on Founder and up. Investor share links on All-In.'],
      ['Sharing?', '3 share links per run on Validate. Unlimited on Founder. Investor share mode on All-In redacts founder identity for blind-sharing with VCs.'],
      ['Who owns the IP?', 'You do. Your idea, your inputs, your outputs. We don\'t claim rights.'],
      ['Are the outputs deterministic?', 'Same structure every time, same evidence ties, same Red Team posture. Specific wording varies between runs — but the verdict-defining logic is stable.'],
    ],
  },
  {
    name: 'Data & privacy', items: [
      ['Where does my idea go?', 'To your private project workspace. Encrypted at rest. Not visible to other users. Not used to train models.'],
      ['Used to train models?', 'No.'],
      ['GDPR?', 'Yes — we honor access, export, and deletion requests.'],
      ['Retention?', "We keep run data while your account is active. Delete your account and all runs are removed within 30 days."],
      ['Can I delete a run?', 'Yes, anytime from the project view.'],
    ],
  },
  {
    name: 'Roadmap & honesty', items: [
      ['Is All-In available today?', 'Yes — All-In is live at launch alongside Spark, Validate, and Founder. Investor framing, the Verifier pass, reasoning trace UI, investor share mode, and portfolio insights are all in production. Pick it from the pricing page.'],
      ["What's not built yet?", 'See /roadmap for the public board. Anything tagged "for All-In" is in active build; "Next" and "Considering" are honest about being further out.'],
      ['When will Studio / Team plans ship?', "Not planned in this phase. If you need team features, email us — if enough founders are asking, it'll happen."],
      ['Will the founding-member price hold?', 'Founding pricing covers the first 100 paying customers — Validate, Founder, or All-In. Spark users qualify if they upgrade while the window is still open. 50% off applies to year 1; year 2 returns to regular pricing, plus you keep 10 bonus credits, a profile badge, and first dibs on new features.'],
    ],
  },
];

function FAQPage() {
  const [filter, setFilter] = useState('All');
  const [q, setQ] = useState('');
  const groups = filter === 'All' ? FAQ_GROUPS : FAQ_GROUPS.filter((g) => g.name === filter);
  return (
    <div className="page faq-page">
      <PageHero eyebrow="FAQ" headline="Everything we've been asked." />
      <section className="section-tight">
        <div className="wrap-narrow">
          <input
            className="mono"
            placeholder="Search questions…"
            value={q}
            onChange={(e) => setQ(e.target.value)}
            style={{ width: '100%', padding: '14px 18px', fontSize: 14, background: 'var(--charcoal)', border: '1px solid var(--line)', borderRadius: 3, color: 'var(--parchment)', marginBottom: 20 }}
          />
          <div className="row" style={{ gap: 8, flexWrap: 'wrap', marginBottom: 28 }}>
            {['All', ...FAQ_GROUPS.map((g) => g.name)].map((f) => (
              <button key={f} className={`tag ${filter === f ? 'gold' : ''}`} onClick={() => setFilter(f)} style={{ cursor: 'pointer', border: filter === f ? undefined : '1px solid var(--line-2)' }}>{f}</button>
            ))}
          </div>
          {groups.map((g) => {
            const items = g.items.filter(([qq, aa]) => !q || qq.toLowerCase().includes(q.toLowerCase()) || aa.toLowerCase().includes(q.toLowerCase()));
            if (!items.length) return null;
            return (
              <div key={g.name} style={{ marginBottom: 48 }}>
                <div className="eyebrow gold" style={{ marginBottom: 12 }}>{g.name.toUpperCase()}</div>
                <FAQAccordion items={items.map(([qq, aa]) => ({ q: qq, a: aa }))} />
              </div>
            );
          })}
        </div>
      </section>
      <FinalCTA headline="Still skeptical? Run it. Answer your own questions." sub="Free first run. No card." />
    </div>
  );
}

Object.assign(window, { ExamplesPage, ExampleDetailPage, AboutPage, FAQPage });
