function Contact() {
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const [errorMsg, setErrorMsg] = React.useState('');

  async function onSubmit(e) {
    e.preventDefault();
    if (status === 'sending') return;
    setStatus('sending');
    setErrorMsg('');

    const form = e.currentTarget;
    if (!form.privacy.checked) {
      setStatus('error');
      setErrorMsg('Per inviare la richiesta è necessario accettare l\'informativa privacy.');
      return;
    }
    const data = {
      nome: form.nome.value,
      studio: form.studio.value,
      email: form.email.value,
      area: form.area.value,
      messaggio: form.messaggio.value,
      privacy: form.privacy.checked,
      honeypot: form.website.value,  // anti-bot field
    };

    try {
      const resp = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });
      const json = await resp.json().catch(() => ({}));
      if (!resp.ok) {
        setStatus('error');
        setErrorMsg(json.error || 'Errore durante l\'invio. Riprovi tra un momento.');
        return;
      }
      setStatus('sent');
      form.reset();
    } catch (err) {
      setStatus('error');
      setErrorMsg('Connessione al server non riuscita. Riprovi tra un momento.');
    }
  }

  if (status === 'sent') {
    return (
      <section id="contact">
        <div className="container contact">
          <div className="intro">
            <h2>Grazie.</h2>
            <p>La sua richiesta è arrivata. La contatteremo entro un giorno lavorativo, con una persona — non con un modulo.</p>
            <div style={{marginTop: 24, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 15}}>
              <div><strong style={{color:'#0B1324'}}>Telefono</strong> · +39 011 93 23 802</div>
              <div><strong style={{color:'#0B1324'}}>Email</strong> · avvocati@nextarea.net</div>
              <div><strong style={{color:'#0B1324'}}>Sede</strong> · C.so Susa 299/A · 10098 Rivoli (TO)</div>
            </div>
            <span className="hash" style={{marginTop: 20, display:'inline-block'}}># ilpiaceredifarelecoseperbene</span>
          </div>
          <div style={{display:'flex', flexDirection:'column', justifyContent:'center', padding:'48px', background:'var(--nx-paper)', border:'1px solid var(--border-subtle)', borderTop:'3px solid var(--nx-green)', borderRadius:'2px'}}>
            <div style={{font:'600 12px var(--font-body)', letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--nx-green)', marginBottom:'16px'}}>Richiesta inviata</div>
            <h3 style={{font:'600 28px/1.15 var(--font-display)', letterSpacing:'-0.01em', color:'var(--nx-ink-900)', marginBottom:'12px'}}>L'abbiamo ricevuta.</h3>
            <p style={{font:'400 16px/1.55 var(--font-body)', color:'var(--nx-ink-700)', marginBottom:'24px'}}>Federico o un membro del team la richiamerà entro le 24 ore lavorative successive. Nel frattempo, se è urgente, ci chiami direttamente al <strong>+39 011 93 23 802</strong>.</p>
            <button type="button" onClick={() => setStatus('idle')} className="nx-btn nx-btn--ghost" style={{alignSelf:'flex-start'}}>Invia un'altra richiesta</button>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section id="contact">
      <div className="container contact">
        <div className="intro">
          <h2>Parliamone.</h2>
          <p>Raccontateci il vostro studio. Rispondiamo entro un giorno lavorativo, con una persona — non con un modulo.</p>
          <div style={{marginTop: 24, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 15}}>
            <div><strong style={{color:'#0B1324'}}>Telefono</strong> · +39 011 93 23 802</div>
            <div><strong style={{color:'#0B1324'}}>Email</strong> · avvocati@nextarea.net</div>
            <div><strong style={{color:'#0B1324'}}>Sede</strong> · C.so Susa 299/A · 10098 Rivoli (TO)</div>
          </div>
          <span className="hash" style={{marginTop: 20, display:'inline-block'}}># ilpiaceredifarelecoseperbene</span>
        </div>
        <form onSubmit={onSubmit} noValidate>
          <div className="row">
            <div><label>Nome</label><input name="nome" type="text" placeholder="Avv. Mario Rossi" required minLength={2} maxLength={200} disabled={status === 'sending'} /></div>
            <div><label>Studio</label><input name="studio" type="text" placeholder="Studio Legale Rossi" maxLength={200} disabled={status === 'sending'} /></div>
          </div>
          <div className="row">
            <div><label>Email</label><input name="email" type="email" placeholder="mario@studiorossi.it" required maxLength={200} disabled={status === 'sending'} /></div>
            <div>
              <label>Area di interesse</label>
              <select name="area" disabled={status === 'sending'} defaultValue="Software · NetLex, gestionale, PCT">
                <option>Software · NetLex, gestionale, PCT</option>
                <option>Assistenza · SLA 4 ore</option>
                <option>Formazione · corsi e crediti</option>
                <option>Consulenza · GDPR, sistemistica</option>
              </select>
            </div>
          </div>
          <div><label>Messaggio</label><textarea name="messaggio" placeholder="Descrivete in poche righe lo studio e di cosa avete bisogno." required minLength={10} maxLength={5000} disabled={status === 'sending'}></textarea></div>
          {/* Consenso privacy — obbligatorio ai sensi del GDPR */}
          <label style={{display:'flex', alignItems:'flex-start', gap:'12px', font:'400 14px/1.5 var(--font-body)', letterSpacing:'0', textTransform:'none', color:'var(--nx-ink-700)', margin:'4px 0 0', cursor:'pointer'}}>
            <input name="privacy" type="checkbox" required disabled={status === 'sending'} style={{marginTop:'4px', width:'16px', height:'16px', flexShrink:0, accentColor:'#0B1324', cursor:'pointer'}} />
            <span>Ho letto e accetto l'<a href="/privacy.html" target="_blank" rel="noopener" style={{color:'var(--nx-blue)', textDecoration:'underline', textUnderlineOffset:'2px'}}>informativa privacy</a> ai sensi del GDPR (Reg. UE 2016/679). I dati saranno trattati da Next per rispondere alla richiesta. <span style={{color:'var(--nx-red, #D3482F)'}} aria-hidden="true">*</span></span>
          </label>
          {/* Honeypot anti-bot — visivamente nascosto, gli umani non lo compilano */}
          <input name="website" type="text" tabIndex={-1} autoComplete="off" aria-hidden="true" style={{position:'absolute', left:'-9999px', width:'1px', height:'1px', opacity:0}} />
          {status === 'error' && (
            <div style={{padding:'12px 16px', background:'var(--nx-red-50)', border:'1px solid var(--nx-red-100)', borderRadius:'2px', color:'var(--nx-red-700)', font:'500 14px var(--font-body)'}}>
              {errorMsg}
            </div>
          )}
          <button type="submit" disabled={status === 'sending'} className="nx-btn nx-btn--primary" style={{alignSelf:'flex-start', marginTop: 8, opacity: status === 'sending' ? 0.6 : 1, cursor: status === 'sending' ? 'wait' : 'pointer'}}>
            {status === 'sending' ? 'Invio in corso…' : 'Invia richiesta'}
            {status !== 'sending' && <i data-lucide="arrow-right"></i>}
          </button>
        </form>
      </div>
    </section>
  );
}
window.Contact = Contact;