// VibeAlchemy Marketing · shared components
const { useState, useEffect, useRef } = React;

// ── Navigation helpers ────────────────────────────────────────────────────
function go(route, e) {
  if (e) e.preventDefault();
  window.location.hash = route;
  window.scrollTo({ top: 0, behavior: 'instant' });
}

function useRoute() {
  const [route, setRoute] = useState(() => window.location.hash.replace(/^#/, '') || '/');
  useEffect(() => {
    const onHash = () => setRoute(window.location.hash.replace(/^#/, '') || '/');
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  return route;
}

// ── Brand: Forged V mark + wordmark ───────────────────────────────────────
// CANONICAL SOURCE: ui/src/components/brand/Logo.jsx. This is a hand-kept
// mirror because the marketing pages run via in-browser Babel (not the Vite
// module graph) and cannot import from src/. If the mark geometry or wordmark
// changes, update BOTH this block and Logo.jsx.
// Raw half + seam use theme vars so the mark flips on light surfaces.
let _vaMarkUid = 0;
function LogoMark({ size = 22 }) {
  const gid = `va-mk-${++_vaMarkUid}`;
  return (
    <svg className="va-logo-mark" viewBox="0 4 120 120" width={size} height={size} role="img" aria-label="VibeAlchemy">
      <defs>
        <linearGradient id={gid} x1="0" y1="0" x2="0.3" y2="1">
          <stop offset="0%" stopColor="#FCD34D" />
          <stop offset="55%" stopColor="#F59E0B" />
          <stop offset="100%" stopColor="#D97706" />
        </linearGradient>
      </defs>
      <polygon points="22,32 41,32 60,73 60,96" fill="var(--parchment)" />
      <polygon points="98,32 79,32 60,73 60,96" fill={`url(#${gid})`} />
      <line x1="60" y1="73" x2="60" y2="96" stroke="var(--obsidian)" strokeWidth="2.4" strokeLinecap="round" />
    </svg>
  );
}
function BrandWord() {
  return (
    <span>
      <span style={{ fontStyle: 'italic' }}>Vibe</span><span style={{ color: 'var(--gold)' }}>Alchemy</span>
    </span>
  );
}

// ── Top nav ───────────────────────────────────────────────────────────────
function TopNav({ route, theme, onToggleTheme }) {
  const active = (r) => route === r || (r !== '/' && route.startsWith(r));
  const nextTheme = theme === 'dark' ? 'light' : 'dark';
  const [mobileOpen, setMobileOpen] = useState(false);
  const close = () => setMobileOpen(false);
  const navLink = (path, label) => (
    <a className={active(path) ? 'active' : ''} onClick={(e) => { close(); go(path, e); }}>{label}</a>
  );
  return (
    <nav className={`va-topnav ${mobileOpen ? 'mobile-open' : ''}`}>
      <div className="va-topnav-inner">
        <a href="#/" className="va-logo bare" onClick={(e) => { close(); go('/', e); }}>
          <LogoMark size={46} />
          <BrandWord />
        </a>
        <div className="va-topnav-links">
          {navLink('/how-it-works', 'How it works')}
          {navLink('/examples', 'Examples')}
          {navLink('/pricing', 'Pricing')}
          {navLink('/faq', 'FAQ')}
          {navLink('/about', 'About')}
        </div>
        <div className="va-topnav-spacer"></div>
        <div className="va-topnav-cta">
          <button
            type="button"
            className="va-theme-toggle"
            aria-label={`Switch to ${nextTheme} mode`}
            title={`Switch to ${nextTheme} mode`}
            onClick={onToggleTheme}
          >
            {theme === 'dark' ? '☀' : '☾'}
          </button>
          <a className="login" href="/login.html">Log in</a>
          {window.PRIVATE_BETA !== false ? (
            <a className="btn btn-primary" href="#" onClick={(e) => { e.preventDefault(); openWaitlist({ source: 'marketing' }); }}>Join the private beta →</a>
          ) : (
            <a className="btn btn-primary" href="/login.html">Start free →</a>
          )}
          <button
            type="button"
            className="va-mobile-toggle"
            aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
            aria-expanded={mobileOpen}
            onClick={() => setMobileOpen((v) => !v)}
          >
            {mobileOpen ? '✕' : '☰'}
          </button>
        </div>
      </div>
    </nav>
  );
}

// ── Footer ───────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="va-footer">
      <div className="va-footer-inner">
        <div className="va-footer-col va-footer-brand">
          <a href="#/" className="va-logo bare" onClick={(e) => go('/', e)}>
            <LogoMark size={32} />
            <BrandWord />
          </a>
          <p style={{ marginTop: 18 }}>The validation engine that tells you the truth. Twelve perspectives, three skeptics, one Decision Memo you can defend.</p>
        </div>
        <div className="va-footer-col">
          <h5>Product</h5>
          <ul>
            <li><a onClick={(e) => go('/how-it-works', e)}>How it works</a></li>
            <li><a onClick={(e) => go('/examples', e)}>Examples</a></li>
            <li><a onClick={(e) => go('/pricing', e)}>Pricing</a></li>
          </ul>
        </div>
        <div className="va-footer-col">
          <h5>Resources</h5>
          <ul>
            <li><a onClick={(e) => go('/faq', e)}>FAQ</a></li>
            <li><a onClick={(e) => go('/compare/preuve', e)}>vs Preuve</a></li>
            <li><a onClick={(e) => go('/compare/ideaproof', e)}>vs IdeaProof</a></li>
            <li><a onClick={(e) => go('/compare/validatorai', e)}>vs ValidatorAI</a></li>
          </ul>
        </div>
        <div className="va-footer-col">
          <h5>Company</h5>
          <ul>
            <li><a onClick={(e) => go('/about', e)}>About</a></li>
            <li><a onClick={(e) => go('/roadmap', e)}>Roadmap</a></li>
            <li><a onClick={(e) => go('/changelog', e)}>Changelog</a></li>
            <li><a onClick={(e) => go('/contact', e)}>Contact</a></li>
          </ul>
        </div>
      </div>
      <div className="va-footer-legal">
        <span>© 2026 VibeAlchemy</span>
        <div className="va-footer-legal-links">
          <a href="/privacy.html">Privacy</a>
          <a href="/terms.html">Terms</a>
          <a href="/status.html">Status</a>
        </div>
      </div>
    </footer>
  );
}

// ── Section wrappers ─────────────────────────────────────────────────────
function Section({ eyebrow, headline, sub, children, bg, narrow, id, className = '' }) {
  return (
    <section id={id} className={`section ${bg ? 'section-bg' : ''} ${className}`}>
      <div className={narrow ? 'wrap-narrow' : 'wrap'}>
        {(eyebrow || headline || sub) && (
          <div className="section-header">
            {eyebrow && <div className="eyebrow">{eyebrow}</div>}
            {headline && <h2 className="h2 serif">{headline}</h2>}
            {sub && <p className="lede">{sub}</p>}
          </div>
        )}
        {children}
      </div>
    </section>
  );
}

// ── Decision Memo artifact (hero visual) ─────────────────────────────────
function MemoArtifact({ verdict = 'cond', verdictLabel = 'Conditional Go', score = 73, title, insight, assumption, redline, meta }) {
  return (
    <div className="memo">
      <span className="memo-sample-tag">Real run · Anonymized</span>
      <div className="memo-header">
        <div>
          <div className="memo-title">{title || 'Decision Memo'}</div>
          <div className="memo-meta">{meta || 'D2C Subscription · 2026-05-22 · Run #017'}</div>
        </div>
        <span className={`memo-verdict-pill ${verdict}`}>{verdictLabel}</span>
      </div>
      <div className="memo-score-row">
        <div>
          <div className="memo-score-label">Composite Score</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
            <span className="memo-score">{score}</span>
            <span className="memo-score-of">/ 100</span>
          </div>
        </div>
        <div style={{ flex: 1, paddingLeft: 24, borderLeft: '1px dashed var(--line-2)', marginLeft: 12 }}>
          <div className="memo-score-label">Confidence</div>
          <div className="mono" style={{ fontSize: 14, color: 'var(--parchment)', marginTop: 4 }}>Moderate · 3 / 5</div>
        </div>
      </div>
      <div>
        <div className="memo-kicker">Key Insight</div>
        <div className="memo-insight">"{insight || 'Premium home coffee enthusiasts seek diverse, fresh, single-origin beans from specific regions — a $20B market currently underserved by subscriptions that lack true curation and independent roaster focus.'}"</div>
      </div>
      <div className="memo-block">
        <div className="memo-kicker">Riskiest Assumption</div>
        <div className="memo-assumption">{assumption || 'Home coffee enthusiasts will readily switch from their existing "meticulously curated system" to a new subscription service for convenience.'}</div>
        <div className="memo-redline" style={{ marginTop: 10 }}>{redline || 'Test before scaling · 15–20 enthusiast interviews · <20% switch willingness kills it'}</div>
      </div>
    </div>
  );
}

// ── Doc preview (deliverable tile artifact) ───────────────────────────────
function DocPreview({ kind, pill, pillText }) {
  if (kind === 'memo') {
    return (
      <div className="deliverable-doc">
        <span className={`doc-pill ${pill || 'go'}`} style={{ background: 'rgba(22,163,74,0.14)', color: '#16A34A', border: '1px solid rgba(22,163,74,0.4)' }}>Conditional Go</span>
        <div className="doc-line long"></div>
        <div className="doc-line med"></div>
        <div className="doc-line short"></div>
        <div className="doc-line long gold"></div>
        <div className="doc-line med"></div>
      </div>
    );
  }
  if (kind === 'market') {
    return (
      <div className="deliverable-doc">
        <div className="row" style={{ gap: 8, marginBottom: 6 }}>
          <span className="mono" style={{ fontSize: 9, letterSpacing: '0.16em', color: 'var(--stone)' }}>TAM</span>
          <span className="mono" style={{ fontSize: 11, color: 'var(--gold)' }}>$2.4B</span>
        </div>
        <div className="doc-line long"></div>
        <div className="doc-line long"></div>
        <div className="doc-line med"></div>
        <div className="row" style={{ gap: 6, marginTop: 8 }}>
          <div style={{ flex: 1, height: 16, background: 'var(--gold-soft)', borderRadius: 2 }}></div>
          <div style={{ flex: 1, height: 16, background: 'var(--line-2)', borderRadius: 2 }}></div>
          <div style={{ flex: 1, height: 16, background: 'var(--line-2)', borderRadius: 2 }}></div>
        </div>
      </div>
    );
  }
  if (kind === 'red') {
    return (
      <div className="deliverable-doc">
        <span className="doc-pill ember">Red Team · 3 objections</span>
        <div className="doc-line long ember"></div>
        <div className="doc-line med"></div>
        <div className="doc-line long ember"></div>
        <div className="doc-line med"></div>
        <div className="doc-line long ember"></div>
        <div className="doc-line short"></div>
      </div>
    );
  }
  if (kind === 'pivot') {
    return (
      <div className="deliverable-doc">
        <span className="doc-pill gold">3 adjacent angles</span>
        <div className="row" style={{ gap: 8, marginTop: 4 }}>
          <div style={{ flex: 1 }}>
            <div className="mono" style={{ fontSize: 9, color: 'var(--gold)', marginBottom: 6 }}>01</div>
            <div className="doc-line long"></div>
            <div className="doc-line med" style={{ marginTop: 6 }}></div>
          </div>
          <div style={{ flex: 1 }}>
            <div className="mono" style={{ fontSize: 9, color: 'var(--stone)', marginBottom: 6 }}>02</div>
            <div className="doc-line long"></div>
            <div className="doc-line med" style={{ marginTop: 6 }}></div>
          </div>
          <div style={{ flex: 1 }}>
            <div className="mono" style={{ fontSize: 9, color: 'var(--stone)', marginBottom: 6 }}>03</div>
            <div className="doc-line long"></div>
            <div className="doc-line med" style={{ marginTop: 6 }}></div>
          </div>
        </div>
      </div>
    );
  }
  return null;
}

// ── Pipeline stage icons (line-art) ───────────────────────────────────────
const StageIcons = {
  Frame: (
    <svg viewBox="0 0 32 32"><rect x="5" y="7" width="22" height="18" rx="1" /><path d="M5 12h22M9 17h8M9 21h12" /></svg>
  ),
  Research: (
    <svg viewBox="0 0 32 32"><circle cx="14" cy="14" r="8" /><path d="M20 20l7 7" strokeLinecap="round" /></svg>
  ),
  Analyse: (
    <svg viewBox="0 0 32 32"><path d="M5 27V11M12 27V5M19 27V14M26 27V8" strokeLinecap="round" /></svg>
  ),
  Challenge: (
    <svg viewBox="0 0 32 32"><path d="M16 4l10 6v8c0 5-4 9-10 10C10 27 6 23 6 18v-8z" /><path d="M12 16l3 3 6-6" strokeLinecap="round" strokeLinejoin="round" /></svg>
  ),
  Decide: (
    <svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="11" /><path d="M11 16l4 4 7-8" strokeLinecap="round" strokeLinejoin="round" /></svg>
  ),
};

// ── Final CTA block ───────────────────────────────────────────────────────
function FinalCTA({ headline, sub, kicker, source }) {
  const isBeta = window.PRIVATE_BETA !== false;
  const defaultSub = isBeta
    ? "Private beta — invitation only. We're inviting founders in small batches. Founding pricing held for invitees."
    : 'Free first run. First 100 paying customers lock in 50% off year 1. No card required.';
  return (
    <section className="cta-block">
      <div className="wrap-narrow">
        {kicker && <div className="eyebrow gold" style={{ marginBottom: 16 }}>{kicker}</div>}
        <h2 className="h2 serif">{headline || "You don't need another framework. You need a verdict you can defend."}</h2>
        <p className="lede">{sub || defaultSub}</p>
        {isBeta ? (
          <a className="btn btn-primary btn-lg" href="#" onClick={(e) => { e.preventDefault(); openWaitlist({ source: source || 'marketing' }); }}>Request access →</a>
        ) : (
          <a className="btn btn-primary btn-lg" href="/login.html">Start free →</a>
        )}
        <p className="mono mute2" style={{ marginTop: 18, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
          {isBeta ? 'Invite-only · We reply within a few days · No spam' : 'No card · No commitment · No spam'}
        </p>
      </div>
    </section>
  );
}

// ── Trust strip ───────────────────────────────────────────────────────────
function TrustStrip() {
  return (
    <div className="wrap">
      <div className="trust-strip">
        <span className="trust-strip-item">
          Built solo by an{' '}
          <a className="link" onClick={(e) => go('/about', e)} style={{ cursor: 'pointer' }}>AI researcher</a>
        </span>
        <span className="trust-strip-item">
          Creator of PyTorch Tabular ·{' '}
          <a className="link" href="https://github.com/pytorch-tabular" target="_blank" rel="noopener noreferrer">
            <svg aria-hidden="true" viewBox="0 0 16 16" width="12" height="12" fill="currentColor" style={{ verticalAlign: '-2px', marginRight: 4 }}>
              <path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 0 0 5.47 7.59c.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
            </svg>
            1.6k stars
          </a>
        </span>
        <span className="trust-strip-item">
          Author of a{' '}
          <a className="link" href="https://amzn.in/d/0fGALQfj" target="_blank" rel="noopener noreferrer">best-selling AI book</a>
        </span>
        <span className="trust-strip-item">
          <a className="link" href="https://scholar.google.com/citations?hl=en&user=oycu9JcAAAAJ" target="_blank" rel="noopener noreferrer">6 papers</a>
          {' · '}2 patents · ∞ ideas
        </span>
      </div>
    </div>
  );
}

// ── FAQ Accordion ─────────────────────────────────────────────────────────
function FAQAccordion({ items }) {
  const [open, setOpen] = useState(0);
  return (
    <div>
      {items.map((it, i) => (
        <div key={i} className={`faq-row ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
          <div className="faq-q">
            <span>{it.q}</span>
            <span className="toggle">+</span>
          </div>
          <div className="faq-a">
            <div className="faq-a-inner">{it.a}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

// ── Page hero (compact, for inner pages) ──────────────────────────────────
function PageHero({ eyebrow, headline, sub }) {
  return (
    <section className="hero" style={{ paddingBottom: 48 }}>
      <div className="wrap">
        <div className="eyebrow" style={{ marginBottom: 18 }}>{eyebrow}</div>
        <h1 className="h1 serif" style={{ maxWidth: 980, marginBottom: 32 }}>{headline}</h1>
        {sub && <p className="lede">{sub}</p>}
      </div>
    </section>
  );
}

// ── Waitlist modal (private beta) ─────────────────────────────────────────
// Public API: window.openWaitlist({ source, tier_interest }) dispatches a
// custom event picked up by <WaitlistRoot> (mounted once in App).
// `source` should be one of the values accepted by /api/waitlist:
// 'marketing' | 'all_in_page' | 'footer'. `tier_interest` is optional and
// only used as a hint when the user opened the modal from a tier card.
function openWaitlist(detail) {
  window.dispatchEvent(new CustomEvent('va:waitlist-open', { detail: detail || {} }));
  try { window.track && window.track('waitlist_open', { source: (detail && detail.source) || 'marketing' }); } catch (_) {}
}

function WaitlistRoot() {
  const [open, setOpen] = useState(false);
  const [meta, setMeta] = useState({ source: 'marketing', tier_interest: null });
  const [email, setEmail] = useState('');
  const [stage, setStage] = useState('');
  const [status, setStatus] = useState('idle'); // idle | submitting | ok | err
  const [errMsg, setErrMsg] = useState('');

  useEffect(() => {
    const onOpen = (e) => {
      const d = (e && e.detail) || {};
      setMeta({ source: d.source || 'marketing', tier_interest: d.tier_interest || null });
      setStatus('idle');
      setErrMsg('');
      setEmail('');
      setStage('');
      setOpen(true);
    };
    window.addEventListener('va:waitlist-open', onOpen);
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => {
      window.removeEventListener('va:waitlist-open', onOpen);
      window.removeEventListener('keydown', onKey);
    };
  }, []);

  if (!open) return null;

  const submit = async (e) => {
    e.preventDefault();
    if (!email || !/.+@.+\..+/.test(email)) {
      setErrMsg('Enter a valid email.');
      return;
    }
    setStatus('submitting');
    setErrMsg('');
    try {
      const res = await fetch('/api/waitlist', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email: email.trim(),
          tier_interest: meta.tier_interest,
          idea_stage: stage || null,
          source: meta.source,
        }),
      });
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        throw new Error((body && body.detail && body.detail.message) || 'Couldn\'t reach the waitlist. Try again shortly.');
      }
      setStatus('ok');
      try { window.track && window.track('waitlist_submit', { source: meta.source, tier_interest: meta.tier_interest, idea_stage: stage || null }); } catch (_) {}
    } catch (err) {
      setStatus('err');
      setErrMsg(err.message || 'Something went wrong.');
    }
  };

  return (
    <div
      className="va-waitlist-overlay"
      onClick={(e) => { if (e.target === e.currentTarget) setOpen(false); }}
      style={{
        position: 'fixed', inset: 0, zIndex: 1000,
        background: 'rgba(8, 6, 4, 0.72)', backdropFilter: 'blur(4px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 20,
      }}
    >
      <div
        className="surface va-waitlist-modal"
        role="dialog" aria-modal="true" aria-labelledby="va-waitlist-title"
        style={{
          maxWidth: 480, width: '100%', padding: '28px 28px 24px',
          position: 'relative', background: 'var(--obsidian-2)',
          border: '1px solid var(--line)', borderRadius: 4,
        }}
      >
        <button
          type="button" aria-label="Close" onClick={() => setOpen(false)}
          style={{
            position: 'absolute', top: 12, right: 12, background: 'transparent',
            border: 'none', color: 'var(--stone)', fontSize: 18, cursor: 'pointer',
            lineHeight: 1, padding: 6,
          }}
        >✕</button>

        {status === 'ok' ? (
          <div>
            <div className="eyebrow gold" style={{ marginBottom: 14 }}>YOU'RE IN</div>
            <h3 className="h3 serif" style={{ marginBottom: 12 }}>Thanks — we'll be in touch.</h3>
            <p className="body" style={{ fontSize: 14, color: 'var(--parchment)' }}>
              We're inviting beta users in small batches. You'll hear from us at <strong>{email}</strong> when your invite is ready. Founding pricing is held for invitees.
            </p>
            <button type="button" className="btn btn-primary" style={{ marginTop: 18 }} onClick={() => setOpen(false)}>Close</button>
          </div>
        ) : (
          <form onSubmit={submit}>
            <div className="eyebrow gold" style={{ marginBottom: 14 }}>PRIVATE BETA · INVITATION ONLY</div>
            <h3 id="va-waitlist-title" className="h3 serif" style={{ marginBottom: 8 }}>Request access</h3>
            <p className="body" style={{ fontSize: 13, color: 'var(--stone)', marginBottom: 18 }}>
              We're letting beta users in batches. Drop your email and the stage you're at — we'll prioritise serious founders first.
            </p>

            <label className="mono mute2" style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', display: 'block', marginBottom: 6 }}>Email</label>
            <input
              type="email" autoFocus required value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="you@company.com"
              style={{
                width: '100%', padding: '10px 12px', fontSize: 14,
                background: 'var(--obsidian)', color: 'var(--parchment)',
                border: '1px solid var(--line-2)', borderRadius: 2,
                fontFamily: 'inherit', marginBottom: 14, boxSizing: 'border-box',
              }}
            />

            <label className="mono mute2" style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', display: 'block', marginBottom: 6 }}>Where are you? (optional)</label>
            <select
              value={stage} onChange={(e) => setStage(e.target.value)}
              style={{
                width: '100%', padding: '10px 12px', fontSize: 14,
                background: 'var(--obsidian)', color: 'var(--parchment)',
                border: '1px solid var(--line-2)', borderRadius: 2,
                fontFamily: 'inherit', marginBottom: 16, boxSizing: 'border-box',
              }}
            >
              <option value="">—</option>
              <option value="pre_idea">Still exploring ideas</option>
              <option value="validating">Validating an idea right now</option>
              <option value="pre_seed">Pre-seed / about to raise</option>
              <option value="pivot">Considering a pivot</option>
            </select>

            {meta.tier_interest && (
              <p className="mono" style={{ fontSize: 11, color: 'var(--gold)', marginBottom: 14 }}>
                Interested in: <strong>{meta.tier_interest === 'all_in' ? 'All-In' : meta.tier_interest}</strong>
              </p>
            )}

            {errMsg && (
              <p className="mono" style={{ fontSize: 11, color: '#FCA5A5', marginBottom: 12 }}>{errMsg}</p>
            )}

            <button
              type="submit" className="btn btn-primary"
              disabled={status === 'submitting'}
              style={{ width: '100%', justifyContent: 'center' }}
            >
              {status === 'submitting' ? 'Submitting…' : 'Request access →'}
            </button>

            <p className="mono mute2" style={{ marginTop: 14, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', textAlign: 'center' }}>
              No spam · We invite in small batches
            </p>
          </form>
        )}
      </div>
    </div>
  );
}

// Make available globally to other scripts
Object.assign(window, {
  go, useRoute, TopNav, Footer, Section, MemoArtifact, DocPreview, StageIcons,
  FinalCTA, TrustStrip, FAQAccordion, PageHero,
  openWaitlist, WaitlistRoot,
});