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');
    fetch('https://app.kit.com/forms/9404295/subscriptions', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: new URLSearchParams({ email_address: email }),
    })
      .then((res) => {
        if (res.ok || res.status === 200 || res.status === 201) {
          setStatus('success');
        } else {
          setStatus('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>Check your inbox — it's on its way.</span>
            </div>
          </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 calor.fit directly.
          </p>
        )}

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

window.EmailCapture = EmailCapture;