function EmailCapture() {
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);

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

  const moves = [
    { n: 'Move 01', t: 'Ankle Dorsiflexion Wall Drill', dose: '10 oscillatory 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' },
  ];

  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>

        {!sent ? (
          <form
            className="capture__form"
            onSubmit={(e) => { e.preventDefault(); setSent(true); }}
          >
            <input
              type="email"
              placeholder="you@domain.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
            <button type="submit" className="btn btn--solid">Send the PDF</button>
          </form>
        ) : (
          <div style={{textAlign: 'center'}}>
            <div className="capture__sent">
              <i data-lucide="check" style={{width: 18, height: 18, color: '#C87941'}}></i>
              <span>Sent to {email || 'you'}. Check your inbox.</span>
            </div>
          </div>
        )}
        <div className="meta capture__fine">No spam. One email per protocol drop.</div>
      </div>
    </section>
  );
}

window.EmailCapture = EmailCapture;