// ContactForm.jsx
(function () {
  function ContactForm() {
    const [form, setForm] = React.useState({
      name: '', email: '', phone: '', type: 'Ristorante / pizzeria', message: '', privacy: false,
    });
    const [submitted, setSubmitted] = React.useState(false);
    const onChange = (k) => (e) => setForm({ ...form, [k]: e.target.value });
    const onSubmit = (e) => {
      e.preventDefault();
      setSubmitted(true);
    };
    if (submitted) {
      return (
        <div className="dg-form-success">
          <div className="dg-form-success-icon">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
          </div>
          <h3>Grazie, {form.name || 'a presto'}.</h3>
          <p>Abbiamo ricevuto la tua richiesta. Ti ricontattiamo entro 24 ore.</p>
          <button className="dg-btn dg-btn-ghost" onClick={() => { setSubmitted(false); setForm({ name:'', email:'', phone:'', type:'Ristorante / pizzeria', message:'', privacy:false }); }}>
            Invia un'altra richiesta
          </button>
        </div>
      );
    }
    return (
      <form className="dg-form" onSubmit={onSubmit}>
        <div className="dg-form-row">
          <label>
            <span>Nome e cognome</span>
            <input required value={form.name} onChange={onChange('name')} placeholder="Mario Rossi" />
          </label>
          <label>
            <span>Email</span>
            <input required type="email" value={form.email} onChange={onChange('email')} placeholder="mario@tuolocale.it" />
          </label>
        </div>
        <div className="dg-form-row">
          <label>
            <span>Telefono</span>
            <input value={form.phone} onChange={onChange('phone')} placeholder="+39 ···" />
          </label>
          <label>
            <span>Tipo di attività</span>
            <select value={form.type} onChange={onChange('type')}>
              <option>Ristorante / pizzeria</option>
              <option>Hotel / catering</option>
              <option>Pasticceria / laboratorio</option>
              <option>Attività industriale</option>
              <option>Altro</option>
            </select>
          </label>
        </div>
        <label className="dg-form-full">
          <span>Raccontaci il problema</span>
          <textarea rows="5" value={form.message} onChange={onChange('message')}
            placeholder="Es. Devo aprire una pizzeria in centro, il palazzo non ha canna fumaria…" />
        </label>
        <label className="dg-form-check">
          <input type="checkbox" checked={form.privacy} onChange={(e) => setForm({ ...form, privacy: e.target.checked })} required />
          <span>Ho letto la privacy policy e acconsento al trattamento dei dati.</span>
        </label>
        <button className="dg-btn dg-btn-primary dg-btn-lg" type="submit" disabled={!form.privacy}>
          Invia richiesta
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
        </button>
      </form>
    );
  }
  window.ContactForm = ContactForm;
})();