// VibeAlchemy Marketing · Personas, compare, changelog, roadmap, contact

// ─── FOR-FOUNDERS ─────────────────────────────────────────────────────────
function ForFoundersPage() {
  return (
    <div className="page for-founders-page">
      <PageHero
        eyebrow="FOR FOUNDERS"
        headline="For the founder who'd rather hear 'no' now than 'why didn't I see this' in 6 months."
      />

      <Section eyebrow="WHO THIS IS FOR" headline="Which one are you?">
        <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 seen enough ideas die to spot the one killing yours. 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" key={i}>
              <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>
            </div>
          ))}
        </div>
      </Section>

      <Section eyebrow="WHAT YOU WALK AWAY WITH" headline="A Decision Memo, plus the docs that back it up." bg>
        <div className="col-2" style={{ maxWidth: 960, margin: '0 auto', alignItems: 'stretch' }}>
          <div className="surface" style={{ padding: 32, display: 'flex', flexDirection: 'column' }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: 'var(--gold)', marginBottom: 14 }}>THE OUTPUT</div>
            <h4 className="h4 serif italic" style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 26, lineHeight: 1.15, marginBottom: 14 }}>The Decision Memo</h4>
            <p className="body" style={{ fontSize: 14, margin: 0 }}>Verdict at the top: Pursue, Sharpen, Pivot, or Rethink. Underneath: the key insight, the riskiest assumption, and a Pivot Map if the verdict isn't a clean Pursue. Written for a founder, not an analyst.</p>
          </div>
          <div className="surface" style={{ padding: 32, display: 'flex', flexDirection: 'column' }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: 'var(--stone)', marginBottom: 14 }}>THE REASONING</div>
            <h4 className="h4 serif italic" style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 26, lineHeight: 1.15, marginBottom: 14 }}>The work behind the verdict</h4>
            <ul className="body" style={{ fontSize: 14, margin: 0, paddingLeft: 18, lineHeight: 1.7 }}>
              <li>Customer &amp; Jobs-to-be-Done</li>
              <li>Market sizing with sources behind every number</li>
              <li>Competitive position and moat</li>
              <li>Business model and unit economics</li>
              <li>Red Team objections from three skeptics</li>
            </ul>
          </div>
        </div>
      </Section>

      <Section eyebrow="PRICING FOR FOUNDERS" headline="Most founders start with Validate." sub="One idea at a time, $29/mo. Step up to Founder when you're filtering three at once.">
        <PricingCards teaser />
        <div style={{ textAlign: 'center', marginTop: 28 }}>
          <a className="link" onClick={(e) => go('/pricing', e)} style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Full pricing →</a>
        </div>
      </Section>

      <Section eyebrow="COMMON OBJECTIONS" headline="What founders ask before they trust the engine." narrow>
        <FAQAccordion items={[
          { q: 'My idea is too early-stage.', a: 'That\'s exactly the time to run it. The whole point is to catch what kills the idea before you sink weeks into it. A blurb is enough.' },
          { q: "I don't have customer data yet.", a: "You don't need any. The Research stage gathers public signal: interviews, forums, market reports, competitor data. That's the input, not your existing data." },
          { q: "I'm not technical enough to interpret the report.", a: 'The Decision Memo is written for a founder, not an analyst. Verdict at the top, plain-English reasoning underneath. No formulas to interpret.' },
          { q: "I'm pre-pre-seed. Do I need this much depth yet?", a: 'Pre-pre-seed is when validation is cheapest. After the pre-seed round, you\'re committed. Now is when killing a bad idea costs the least.' },
        ]} />
      </Section>

      <FinalCTA />
    </div>
  );
}

// ─── FOR-ALL-IN ───────────────────────────────────────────────────────────
function ForAllInPage() {
  return (
    <div className="page for-all-in-page">
      <PageHero
        eyebrow="ALL-IN TIER · LIVE"
        headline="The Decision Memo that defends itself."
        sub="For founders going all-in on one idea, walking into a fundraise that depends on it surviving scrutiny."
      />

      <Section eyebrow="WHAT ALL-IN ADDS" headline="Five layers of defensibility, on top of everything in Founder.">
        <div className="col-3">
          {[
            { h: 'Investor framing', b: 'The Decision Memo rewritten in the voice of a partner writing to their fund. Same content, defensible voice.' },
            { h: 'Fact-check pass', b: 'Every numeric and named-entity claim is verified against the underlying evidence. Citations on every sentence. Verified-claims-only mode for high-stakes share.' },
            { h: 'See every agent\'s reasoning', b: 'The audit trail behind the verdict. Twelve perspectives, each collapsible by section. Click any claim to open the source.' },
            { h: 'Investor share mode', b: 'Share-link variant that redacts your identity. Send the memo blind to VCs without revealing yourself.' },
            { h: 'Roadmap', b: 'A sequenced execution roadmap for the validated idea. What to build first, who to talk to next, what to verify.' },
          ].map((it, i) => (
            <div className="surface" style={{ padding: 26 }} key={i}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: 'var(--gold)', marginBottom: 14 }}>{`FEATURE ${String(i + 1).padStart(2, '0')}`}</div>
              <h4 className="h4 serif" style={{ fontFamily: 'var(--serif)', fontSize: 24, lineHeight: 1.15, marginBottom: 12 }}>{it.h}</h4>
              <p className="body" style={{ fontSize: 14, margin: 0 }}>{it.b}</p>
            </div>
          ))}
        </div>
      </Section>

      <Section eyebrow="WHEN YOU NEED THIS" headline="Reasons you're here." bg narrow>
        <div style={{ maxWidth: 760, margin: '0 auto', display: 'grid', gridTemplateColumns: '80px 1fr', columnGap: 32, rowGap: 28, alignItems: 'baseline' }}>
          {[
            { label: 'WHEN', text: 'You\'re about to raise.' },
            { label: 'WHEN', text: 'This memo is going to your partner, advisor, or board.' },
            { label: 'WHEN', text: 'You\'re staking real resources on this one.' },
            { label: 'THEN', text: 'You need every claim in the memo defensible under questioning.' },
          ].map(({ label, text }, i, arr) => {
            const isThen = label === 'THEN';
            return (
              <React.Fragment key={i}>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.26em', color: isThen ? 'var(--gold)' : 'var(--stone)', paddingTop: 8 }}>{label}</div>
                <div className="serif italic" style={{ fontSize: isThen ? 30 : 24, lineHeight: 1.3, color: isThen ? 'var(--gold)' : 'var(--parchment)', borderTop: i === 0 ? 'none' : '1px dashed var(--line-2)', paddingTop: i === 0 ? 0 : 28 }}>{text}</div>
              </React.Fragment>
            );
          })}
        </div>
      </Section>

      {window.PRIVATE_BETA !== false ? (
        <FinalCTA
          headline="All-In is in private beta. Tell us why it's you."
          sub="We're inviting All-In users one at a time so we can support each properly. Request access and tell us what you're raising on — we prioritise founders with a real bet."
          source="all_in_page"
        />
      ) : (
        <FinalCTA headline="All-In, live now. Founding pricing while it lasts." sub="First 100 paying customers. 50% off year 1. Start free on Spark and upgrade when you're ready." />
      )}
    </div>
  );
}

// ─── COMPARE ──────────────────────────────────────────────────────────────
const COMPARE = {
  preuve: {
    name: 'Preuve',
    sub: 'A $29 one-shot PDF report.',
    stronger: [
      ['Faster turnaround on a single report', 'If all you want is a 60-second take, they\'ll deliver one.'],
      ['Lower friction for one-off curiosity', 'No subscription. Drop the form, get the PDF.'],
      ['Cheaper for a single use', '$29 one-shot vs $29/mo Validate.'],
    ],
    ours: [
      ['Multi-perspective deliberation, not a one-pass score', 'Twelve perspectives, three of them skeptics. The verdict comes out of structural debate, not a single model\'s opinion.'],
      ['A Decision Memo, not a PDF report', 'Designed to be read like a partner-written memo. Verdict, reasoning, citations, pivot map.'],
      ['Designed to kill ideas, not flatter them', 'Three structural skeptics whose only job is to break the idea. No "you score 74/100" upsell loop.'],
      ['You can re-run, pivot, and compare', 'Validation isn\'t a one-shot for serious founders.'],
    ],
    table: [
      ['Output format', 'PDF report', 'Decision Memo + 5 supporting docs'],
      ['Adversarial perspectives', 'None', 'Three structural skeptics'],
      ['Re-runs / pivots', '—', 'Included'],
      ['Source citations', 'Limited', 'Every claim (All-In investor memo)'],
      ['Price', '$29 / report', '$0 / first run · $29/mo Validate'],
    ],
  },
  ideaproof: {
    name: 'IdeaProof',
    sub: 'A logo + branding + pitch-deck bundle.',
    stronger: [
      ['Logo and brand generation', 'They do that part. We don\'t.'],
      ['Pitch-deck templates', 'Designed templates and on-brand exports.'],
      ['Visual identity tools', 'Color palettes, font pairing, logo variants.'],
    ],
    ours: [
      ['Validation depth, not brand generation', 'Different jobs. Validation tells you whether to build it. Branding tells you what to call it.'],
      ['Structured Decision Memo with adversarial review', 'They produce a brand kit. We produce a defensible verdict.'],
      ['Pivot Map when the verdict isn\'t a clean Pursue', 'The wedge they\'d be branding might not be the right one. We name that first.'],
      ['Built for the pre-build decision', 'You don\'t need a logo for an idea you shouldn\'t build.'],
    ],
    table: [
      ['Output', 'Logo + deck + brand kit', 'Decision Memo + 5 supporting docs'],
      ['Goes-no-goes a wedge', '—', '✓'],
      ['Adversarial perspectives', '—', 'Three structural skeptics'],
      ['When to use', 'After validation', 'Before branding'],
    ],
  },
  validatorai: {
    name: 'ValidatorAI',
    sub: 'A chat-style AI co-founder.',
    stronger: [
      ['Conversational pace', 'Chat back and forth in real time.'],
      ['Lower friction to start', 'Type and go — no structured input.'],
      ['Open-ended exploration', 'You can ask whatever you want.'],
    ],
    ours: [
      ['Multi-perspective debate, not one chat partner', 'One model agreeing with you isn\'t validation — it\'s confirmation bias with extra steps.'],
      ['Structured output you can share', 'A chat thread isn\'t a Decision Memo. You can\'t hand a screenshot to your co-founder and call it validation.'],
      ['Three structurally adversarial skeptics', 'A chat-with-an-AI can\'t hold an adversarial line. The Red Team is wired to.'],
      ['Same structured output every time', 'A chat drifts. The pipeline doesn\'t.'],
    ],
    table: [
      ['Output', 'Chat thread', 'Decision Memo + 5 supporting docs'],
      ['Shape', 'Conversational', 'Pipeline'],
      ['Skepticism', 'Same model arguing both sides', 'Three structurally adversarial perspectives'],
      ['Defensibility', 'Hard to share a chat', 'Designed to be shared'],
    ],
  },
};

function ComparePage({ slug }) {
  const c = COMPARE[slug] || COMPARE.preuve;
  return (
    <div className="page">
      <PageHero
        eyebrow={`COMPARE · ${c.name.toUpperCase()}`}
        headline={`VibeAlchemy vs ${c.name}.`}
        sub={`${c.sub} An honest, point-by-point comparison.`}
      />

      <Section eyebrow={`WHERE ${c.name.toUpperCase()} IS STRONGER`} headline="What they do well." bg>
        <div className="col-3">
          {c.stronger.map(([h, b], i) => (
            <div className="surface" style={{ padding: 26 }} key={i}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--stone)', letterSpacing: '0.18em', marginBottom: 10 }}>{`POINT ${String(i + 1).padStart(2, '0')}`}</div>
              <h4 className="h4 serif" style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.2, marginBottom: 10 }}>{h}</h4>
              <p className="body" style={{ margin: 0, fontSize: 14 }}>{b}</p>
            </div>
          ))}
        </div>
      </Section>

      <Section eyebrow="WHERE WE'RE STRONGER" headline={`Where VibeAlchemy goes deeper than ${c.name}.`}>
        <div className="stack stack-md">
          {c.ours.map(([h, b], i) => (
            <div className="surface-tinted" style={{ padding: 24 }} key={i}>
              <div className="row" style={{ gap: 18, alignItems: 'flex-start' }}>
                <div className="mono" style={{ fontSize: 22, color: 'var(--gold)', minWidth: 40 }}>{String(i + 1).padStart(2, '0')}</div>
                <div>
                  <h4 className="h4 serif" style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.2, marginBottom: 8 }}>{h}</h4>
                  <p className="body" style={{ margin: 0, fontSize: 14 }}>{b}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Section>

      <Section eyebrow="SIDE BY SIDE" headline="Capability-by-capability." bg>
        <table className="tier-table">
          <thead>
            <tr>
              <th></th>
              <th>{c.name}</th>
              <th className="us">VibeAlchemy</th>
            </tr>
          </thead>
          <tbody>
            {c.table.map((row, i) => (
              <tr key={i}>
                <td style={{ color: 'var(--parchment)' }}>{row[0]}</td>
                <td className={row[1] === '—' ? 'cell-no' : ''}>{row[1]}</td>
                <td className="us">{row[2]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Section>

      <FinalCTA headline={`Already using ${c.name}? Try the system built to kill bad ideas.`} sub="Free first run. First 100 paying customers — 50% off year 1." />
    </div>
  );
}

// ─── CHANGELOG ────────────────────────────────────────────────────────────
const CHANGELOG = [
  {
    date: '2026-05-26',
    items: [
      ['Shipped', 'Investor framing layer (All-In) — partner-voice memo with 0-2 ranked deal-breakers + falsification tests.'],
      ['Shipped', 'Verifier / fact-check pass (All-In) — every numeric and named-entity claim is checked against a source.'],
      ['Shipped', 'Reasoning trace UI (All-In) — per-agent reasoning surfaced on every run.'],
      ['Shipped', 'Investor share mode (All-In) — founder-identity-redacted share links.'],
      ['Shipped', 'Portfolio Insights region (All-In) — recurring failure modes + re-frame opportunities + convergent themes, surfaced on Home after 3 completed runs.'],
      ['Improved', 'Investor memo gets clickable [N] citations + numbered bibliography.'],
      ['Improved', 'Portfolio shift-click selects two distant rows directly for compare.'],
    ],
  },
  {
    date: '2026-05-18',
    items: [
      ['Shipped', 'Tier pricing matrix: Spark / Validate / Founder / All-In.'],
      ['Shipped', 'Founding-member 50% off year-1 coupon (first 100 paying customers).'],
      ['Shipped', 'Concurrent-run cap + monthly quota enforcement per tier.'],
      ['Shipped', 'Standard 4xx envelopes with upgrade-path suggestions.'],
      ['Added', 'PDF export gated to Founder+.'],
      ['Improved', 'Error-recovery re-runs no longer count toward run quota.'],
    ],
  },
  {
    date: '2026-05-12',
    items: [
      ['Shipped', 'Launch Plan — replaces the old GTM Plan + Experiment Plan.'],
    ],
  },
  {
    date: '2026-04-28',
    items: [
      ['Shipped', 'Competitive-Landscape fan-out — identifier → research → synthesise.'],
      ['Improved', 'Per-incumbent depth: dedicated ReAct loop per competitor (Pro+).'],
    ],
  },
  {
    date: '2026-04-15',
    items: [
      ['Shipped', 'Voice-of-Customer agent — ReAct loop with citation linkage.'],
      ['Improved', 'Pain themes now carry source IDs every downstream agent cites.'],
    ],
  },
  {
    date: '2026-04-08',
    items: [
      ['Shipped', 'Market Sizer rewrite — ReAct, cited figures, fetch_url tool.'],
    ],
  },
  {
    date: '2026-04-05',
    items: [
      ['Shipped', 'V2 pipeline — 12 specialist perspectives, 3 structural skeptics.'],
    ],
  },
];

// Real "building" entries — paired with the changelog above. Mirrors the
// "Building" timeline on the All-In page so we set expectations.
const CHANGELOG_BUILDING = [
  ['3-way compare (Founder+)',                  'Compare three runs side by side. Backend already accepts three IDs; UI catches up next.'],
];

function ChangelogPage() {
  return (
    <div className="page">
      <PageHero eyebrow="CHANGELOG" headline="What we've shipped." sub="Honest log, newest first." />
      <section className="section-tight">
        <div className="wrap-narrow">
          {CHANGELOG.map((c) => (
            <div className="changelog-entry" key={c.date}>
              <div className="changelog-date">{c.date}</div>
              <ul className="changelog-list">
                {c.items.map(([kind, text], i) => (
                  <li key={i}>
                    <span className={`kind ${kind.toLowerCase()}`}>{kind}</span>
                    <span>{text}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
          <p className="mono mute2" style={{ fontSize: 11, letterSpacing: '0.08em', textAlign: 'center', marginTop: 40 }}>Weekly to biweekly entries. Bug fixes included.</p>
        </div>
      </section>

      <Section eyebrow="BUILDING NEXT" headline="In flight." sub="Honest about what isn't shipped yet. No dates — priorities shift." bg narrow>
        <ul className="stack stack-sm" style={{ listStyle: 'none', padding: 0 }}>
          {CHANGELOG_BUILDING.map(([title, sub], i) => (
            <li key={i} className="surface" style={{ padding: 20, display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 14, alignItems: 'flex-start' }}>
              <span className="mono" style={{ fontSize: 14, color: 'var(--gold)' }}>⚒</span>
              <div>
                <div style={{ fontSize: 15, color: 'var(--parchment)' }}>{title}</div>
                <div className="body" style={{ fontSize: 13, marginTop: 4 }}>{sub}</div>
              </div>
            </li>
          ))}
        </ul>
      </Section>

      <FinalCTA headline="Built in public. Try the latest." />
    </div>
  );
}

// ─── ROADMAP ──────────────────────────────────────────────────────────────
const ROADMAP = {
  shipped: [
    'Full pipeline', 'Pivot Map', 'Launch Plan', 'Roadmap (basic)',
    'Compare runs', 'Portfolio view',
    'Investor framing (All-In)', 'Verifier / fact-check (All-In)',
    'Reasoning trace UI (All-In)', 'Investor share mode (All-In)',
    'Portfolio insights (All-In)',
  ],
  building: [
    ['3-way compare', 'For Founder+'],
  ],
  next: ['Vertical-specific Red Teams', 'Deeper enrichment (Crunchbase, OpenCorps)', 'Mobile app', 'Team-share read-only links'],
  considering: ['Compare runs across founders', 'Custom Red Team personas', 'Team / multi-seat workspaces', 'VC Mode (separate product)'],
};

function RoadmapPage() {
  return (
    <div className="page">
      <PageHero eyebrow="ROADMAP" headline="What we're building, in order of priority." />
      <section className="section-tight">
        <div className="wrap">
          <div className="roadmap-board">
            <div className="roadmap-col shipped">
              <div className="roadmap-col-head">✓ Shipped</div>
              {ROADMAP.shipped.map((x, i) => <div className="roadmap-item" key={i}>{x}</div>)}
            </div>
            <div className="roadmap-col building">
              <div className="roadmap-col-head">⚒ Building</div>
              {ROADMAP.building.map(([x, tag], i) => (
                <div className="roadmap-item" key={i}>{x}<span className="item-tag">{tag}</span></div>
              ))}
            </div>
            <div className="roadmap-col next">
              <div className="roadmap-col-head">→ Next</div>
              {ROADMAP.next.map((x, i) => <div className="roadmap-item" key={i}>{x}</div>)}
            </div>
            <div className="roadmap-col considering">
              <div className="roadmap-col-head">… Considering</div>
              {ROADMAP.considering.map((x, i) => <div className="roadmap-item" key={i}>{x}</div>)}
            </div>
          </div>
          <p className="mono mute2" style={{ marginTop: 32, fontSize: 12, letterSpacing: '0.08em', textAlign: 'center' }}>We update this monthly. No promises on dates — priorities shift as we learn.</p>
        </div>
      </section>
      <FinalCTA headline="Like where this is going? Get in early." />
    </div>
  );
}

// ─── CONTACT ──────────────────────────────────────────────────────────────
function ContactPage() {
  return (
    <div className="page">
      <PageHero eyebrow="CONTACT" headline="Get in touch." />
      <section className="section-tight">
        <div className="wrap-narrow">
          <div className="surface" style={{ padding: 36 }}>
            <p className="body" style={{ fontSize: 17, lineHeight: 1.6 }}>
              For questions about the product, pricing, or anything else — email <a className="link" href="mailto:hello@vibealchemyapp.com">hello@vibealchemyapp.com</a> (replies usually within 24 hours).
            </p>
            <p className="body" style={{ fontSize: 17, lineHeight: 1.6 }}>
              For press or partnerships — same email, with <span className="mono" style={{ color: 'var(--gold)' }}>"press"</span> or <span className="mono" style={{ color: 'var(--gold)' }}>"partnership"</span> in the subject line.
            </p>
            <p className="body" style={{ fontSize: 17, lineHeight: 1.6 }}>
              For bugs or feature requests — public roadmap is at <a className="link" onClick={(e) => go('/roadmap', e)}>/roadmap</a>, or email the same address.
            </p>
            <hr className="divider-dot" style={{ margin: '32px 0' }} />
            <div className="stack stack-sm">
              {[
                ['System status', '/status.html'],
                ['Privacy',       '/privacy.html'],
                ['Terms',         '/terms.html'],
              ].map(([k, href]) => (
                <div className="kv" key={k}>
                  <span className="k" style={{ minWidth: 130 }}>{k.toUpperCase()}</span>
                  <span className="v"><a className="link" href={href}>{href}</a></span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
      <FinalCTA headline="Or just run it." />
    </div>
  );
}

Object.assign(window, {
  ForFoundersPage, ForAllInPage, ComparePage, ChangelogPage, RoadmapPage, ContactPage,
});