// ContattiScreen — reason-based contact form with conditional fields + confirmation.
function ContattiScreen({ go }) {
  const NS = window.EventiVinoMilanoDesignSystem_98fdb6;
  const { Input, Textarea, Select, Checkbox, Button, Breadcrumb, Badge } = NS;
  const Icon = window.EVMIcon;
  const [reason, setReason] = React.useState('Segnalare un evento');
  const [sent, setSent] = React.useState(false);
  const [consent, setConsent] = React.useState(false);

  if (sent) {
    return (
      <div style={{ maxWidth: 620, margin: '0 auto', padding: '96px var(--container-pad)', textAlign: 'center' }}>
        <span style={{ display: 'inline-flex', width: 64, height: 64, borderRadius: 'var(--radius-pill)', background: 'var(--vino-soft)', color: 'var(--vino-strong)', alignItems: 'center', justifyContent: 'center', marginBottom: 24 }}><Icon name="check" size={30} /></span>
        <h1 style={{ fontSize: 'var(--fs-h1)', fontWeight: 'var(--fw-semibold)', letterSpacing: 'var(--ls-h1)', margin: 0 }}>Grazie, ci siamo!</h1>
        <p style={{ fontSize: 'var(--fs-body-lg)', color: 'var(--text-muted)', margin: '16px 0 32px' }}>Ho ricevuto il tuo messaggio. Ti rispondo personalmente entro due giorni lavorativi, spesso prima.</p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
          <Button variant="primary" onClick={() => go('Eventi')}>Intanto, scopri gli eventi</Button>
          <Button variant="ghost" onClick={() => setSent(false)}>Invia un altro messaggio</Button>
        </div>
      </div>
    );
  }

  const reasons = ['Segnalare un evento', 'Proporre una collaborazione', 'Richiedere una sponsorizzazione', 'Informazioni generali', 'Altro'];
  const isEvent = reason === 'Segnalare un evento';
  const isBiz = reason === 'Proporre una collaborazione' || reason === 'Richiedere una sponsorizzazione';

  return (
    <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '32px var(--container-pad) 96px' }}>
      <Breadcrumb items={[{ label: 'Home', href: '#' }, { label: 'Contatti' }]} />
      <div style={{ display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 56, marginTop: 24 }} className="evm-detail">
        <div style={{ maxWidth: 380 }}>
          <h1 style={{ fontSize: 'var(--fs-h1)', fontWeight: 'var(--fw-semibold)', letterSpacing: 'var(--ls-h1)', lineHeight: 1.02, margin: 0 }}>Scrivimi</h1>
          <p style={{ fontSize: 'var(--fs-body-lg)', color: 'var(--ink-82)', lineHeight: 1.45, margin: '18px 0 28px' }}>Un evento da segnalare, un’idea di collaborazione o una domanda. Dietro questo form non c’è un ufficio: rispondo io, di persona.</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[['mail', 'segnala@eventivinomilano.it'], ['instagram', '@eventivinomilano'], ['clock', 'Risposta entro 48h lavorative']].map(([i, t]) => (
              <div key={t} style={{ display: 'flex', gap: 12, alignItems: 'center', color: 'var(--ink-82)', fontSize: 'var(--fs-sm)' }}>
                <span style={{ color: 'var(--vino-strong)' }}><Icon name={i} size={18} /></span>{t}
              </div>
            ))}
          </div>
        </div>

        <form action="/send.php" method="post" onSubmit={(e) => { if (!consent) e.preventDefault(); }} style={{ background: 'var(--cream)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', padding: 'var(--space-7)', display: 'flex', flexDirection: 'column', gap: 18 }}>
          <Select label="Perché ci scrivi?" name="motivo" value={reason} onChange={(e) => setReason(e.target.value)}>
            {reasons.map((r) => <option key={r}>{r}</option>)}
          </Select>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Input label="Nome e cognome" name="nome" placeholder="Come ti chiami" required />
            <Input label="Email" name="email" type="email" placeholder="tu@email.it" required />
          </div>

          {isEvent && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18, padding: 'var(--space-4)', background: 'var(--vino-soft)', borderRadius: 'var(--radius-lg)' }}>
              <span style={{ fontSize: 'var(--fs-xs)', textTransform: 'uppercase', letterSpacing: 'var(--ls-overline)', color: 'var(--vino-strong)' }}>Dettagli dell’evento</span>
              <Input label="Nome dell’evento" name="evento_nome" placeholder="Es. Cantine aperte 2026" style={{ background: 'var(--off-white)' }} />
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                <Input label="Data" name="evento_data" type="date" style={{ background: 'var(--off-white)' }} />
                <Input label="Luogo" name="evento_luogo" placeholder="Città e sede" style={{ background: 'var(--off-white)' }} />
              </div>
              <Input label="Link all’evento (facoltativo)" name="evento_link" placeholder="https://" style={{ background: 'var(--off-white)' }} />
            </div>
          )}
          {isBiz && (
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, padding: 'var(--space-4)', background: 'var(--lavender-soft)', borderRadius: 'var(--radius-lg)' }}>
              <Input label="Azienda / realtà" name="azienda" placeholder="Nome" style={{ background: 'var(--off-white)' }} />
              <Input label="Ruolo / referente" name="referente" placeholder="Il tuo ruolo" style={{ background: 'var(--off-white)' }} />
            </div>
          )}

          <Textarea label="Il tuo messaggio" name="messaggio" rows={5} placeholder={isEvent ? 'Raccontami l’evento: cosa, quando, dove e perché è speciale.' : 'Raccontami cosa hai in mente.'} />

          <Checkbox label="Acconsento al trattamento dei miei dati secondo la privacy policy." name="privacy" value="si" checked={consent} onChange={() => setConsent(!consent)} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 4 }}>
            <Button variant="accent" size="lg" type="submit" disabled={!consent}>Invia messaggio</Button>
            <span style={{ fontSize: 'var(--fs-xs)', color: 'var(--text-muted)' }}>Niente spam. Solo una risposta vera.</span>
          </div>
        </form>
      </div>
    </div>
  );
}
window.ContattiScreen = ContattiScreen;