const CTA = () => {
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle'); // idle | ok | err
  const [msg, setMsg] = React.useState('');

  React.useEffect(() => {
    try {
      const saved = localStorage.getItem('arogya_email');
      if (saved) { setStatus('ok'); setMsg("You're on the list. We'll be in touch."); }
    } catch (e) {}
  }, []);

  const submit = (e) => {
    e.preventDefault();
    const v = email.trim();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) {
      setStatus('err');
      setMsg('Hmm, that email doesn\u2019t look right.');
      return;
    }
    try {
      const list = JSON.parse(localStorage.getItem('arogya_emails') || '[]');
      if (!list.includes(v)) list.push(v);
      localStorage.setItem('arogya_emails', JSON.stringify(list));
      localStorage.setItem('arogya_email', v);
    } catch (e) {}
    setStatus('ok');
    setMsg("You're on the list. We'll be in touch.");
    setEmail('');
  };

  return (
    <section id="signup">
      <div style={{ maxWidth: 'calc(var(--maxw) + 48px)', margin: '0 auto' }}>
        <div className="cta reveal">
          <span className="eyebrow">Early access</span>
          <h2 style={{ marginTop: 16 }}>The next generation of preventive healthcare. Be first.</h2>
          <p>Join the early-access list. No spam — just a single email when the beta opens, plus an occasional build update.</p>

          <form className={`signup-form ${status === 'ok' ? 'success' : ''} ${status === 'err' ? 'error' : ''}`} onSubmit={submit}>
            <input
              type="email"
              placeholder="you@goodemail.com"
              value={email}
              onChange={e => { setEmail(e.target.value); if (status !== 'idle') setStatus('idle'); }}
              aria-label="Email"
            />
            <button type="submit">
              {status === 'ok' ? <Icon name="check" size={16} stroke={2.4}/> : 'Request access'}
            </button>
          </form>

          <div className={`signup-msg ${status === 'ok' ? 'ok' : ''} ${status === 'err' ? 'err' : ''}`}>{msg || '\u00A0'}</div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { CTA });