function EmailCapture() {
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle'); // idle | loading | success | error

  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons({ attrs: { 'stroke-width': 1.5 }});
  }, [status]);

  const moves = [
    { n: 'Move 01', t: 'Ankle Dorsiflexion Wall Drill', dose: '10 back-and-forth reps · per side' },
    { n: 'Move 02', t: '90/90 Hip Stretch with Active Transitions', dose: '60s · per side' },
    { n: 'Move 03', t: 'Kneeling Hip Flexor Stretch with PPT', dose: '60s · per side' },
    { n: 'Move 04', t: 'Thoracic Extension Over Foam Roller', dose: '3 positions · 3 breaths each' },
  ];

  const handleSubmit = (e) => {
    e.preventDefault();
    setStatus('loading');
    // Posts SAME-ORIGIN to our Cloudflare Pages Function (functions/api/subscribe.js),
    // which forwards the subscribe to beehiiv with the API key held server-side
    // (LIB-10 Phase 2b — Kit→beehiiv cutover). Because it's same-origin we get a
    // REAL response (no more no-cors guessing): res.ok is the truth signal.
    fetch('/api/subscribe', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email }),
    })
      .then((res) => setStatus(res.ok ? 'success' : 'error'))
      .catch(() => setStatus('error'));
  };

  return (
    <section className="capture" id="cta" data-screen-label="Email Capture">
      <div className="capture__heat" />
      <div className="capture__inner">
        <div className="capture__head">
          <div className="eyebrow">Free · PDF · No fluff</div>
          <h2 className="capture__title">The Pre-Lift Mobility Stack.</h2>
          <p className="capture__sub">
            Four movements. Ten minutes. Run it before any lower body session — no extra session, no mat required. Just range that holds under load.
          </p>
        </div>

        <div className="capture__moves">
          {moves.map((m) => (
            <div className="move" key={m.n}>
              <div className="move__n">{m.n}</div>
              <h3 className="move__title">{m.t}</h3>
              <div className="move__dose">{m.dose}</div>
            </div>
          ))}
        </div>

        {status === 'success' ? (
          <div style={{textAlign: 'center'}}>
            <div className="capture__sent">
              <i data-lucide="check" style={{width: 18, height: 18, color: '#C87941'}}></i>
              <span>You're in. Grab your Stack right here — and keep an eye on your inbox for the next protocol drop.</span>
            </div>
            <a
              className="btn btn--solid"
              href="/pre-lift-mobility-stack.pdf"
              download
              target="_blank"
              rel="noopener"
              style={{marginTop: 16, display: 'inline-flex'}}
            >
              Download the Pre-Lift Mobility Stack (PDF)
            </a>
          </div>
        ) : (
          <form className="capture__form" onSubmit={handleSubmit}>
            <input
              type="email"
              placeholder="you@domain.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              disabled={status === 'loading'}
            />
            <button type="submit" className="btn btn--solid" disabled={status === 'loading'}>
              {status === 'loading' ? 'Sending…' : 'Send the PDF'}
            </button>
          </form>
        )}

        {status === 'error' && (
          <p style={{textAlign: 'center', color: '#C87941', marginTop: 12, fontSize: 14}}>
            Something went wrong. Try again or email <a href="mailto:hello@calor.fit" style={{color: '#C87941'}}>hello@calor.fit</a>.
          </p>
        )}

        <div className="meta capture__fine">No spam. One email per protocol drop.</div>
      </div>
    </section>
  );
}

window.EmailCapture = EmailCapture;