function CTA({ theme }) {
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);
  return (
    <section id="cta">
      <div className="container">
        <div className="cta reveal">
          <div className="cta-canvas" style={{background:'radial-gradient(ellipse at center, color-mix(in oklch, var(--accent-cyan) 25%, transparent), transparent 60%)'}}></div>
          <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.2em', color:'var(--fg-dim)', textTransform:'uppercase', marginBottom:24}}>
            Reveal · Miami · 07.24.26
          </div>
          <h2>Become the<br/><em>first</em> to know.</h2>
          <p>Reserve your place in the first cohort of LifeCoPilot users. No spam. Just a single email on reveal day.</p>
          {!sent ? (
            <form onSubmit={(e) => { e.preventDefault(); if (email) setSent(true); }}>
              <input type="email" placeholder="you@yourself.com" value={email} onChange={e => setEmail(e.target.value)} required />
              <button type="submit">Reserve →</button>
            </form>
          ) : (
            <div style={{marginTop:32, fontFamily:'var(--font-mono)', fontSize:13, color:'var(--accent-cyan)', letterSpacing:'0.12em', textTransform:'uppercase'}}>
              ✓ Your seat is reserved. See you in Miami.
            </div>
          )}
        </div>
      </div>
    </section>
  );
}
window.CTA = CTA;