function Contact() {
  const { Input, Select, Checkbox, Radio, Button, Toast, Dialog, Divider } = NS;
  const [via, setVia] = React.useState('tel');
  const [ok, setOk] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  const [confirm, setConfirm] = React.useState(false);

  return (
    <main>
      <section>
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-9)' }}>
          <div>
            <div className="eyebrow">Contacto</div>
            <h1 style={{ fontSize: 'var(--fs-display-3)', margin: 'var(--space-4) 0 var(--space-5)' }}>AGENDAR UNA VISITA</h1>
            <p style={{ maxWidth: '42ch', color: 'var(--text-muted)' }}>
              Déjanos tus datos y un asesor te contacta en menos de 24 horas para coordinar el recorrido.
            </p>
            <Divider width="60%" style={{ margin: 'var(--space-7) 0' }} />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
              {[['Ventas', '+52 999 000 0000'], ['Correo', 'ventas@countrylakes.mx'], ['Ubicación', 'Mérida, Yucatán, México']].map(([k, v]) => (
                <div key={k}>
                  <div style={{ fontSize: 'var(--fs-caption)', letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{k}</div>
                  <div style={{ marginTop: 'var(--space-2)' }}>{v}</div>
                </div>
              ))}
            </div>
            <img src="../../assets/imagery-golf-players.webp" alt="Campo de golf" style={{ width: '100%', marginTop: 'var(--space-8)' }} />
          </div>

          <form onSubmit={(e) => { e.preventDefault(); setConfirm(true); }}
                style={{ background: 'var(--surface-muted)', padding: 'var(--space-8)', display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-6)' }}>
              <Input label="Nombre completo" placeholder="Ana Solís" required />
              <Input label="Teléfono" placeholder="+52 999 000 0000" />
              <Input label="Correo" type="email" placeholder="ana@correo.com" required />
              <Select label="Producto de interés" options={[
                { value: 'lote', label: 'Lote residencial' },
                { value: 'macro', label: 'Macrolote' },
                { value: 'villa', label: 'Villa de autor' },
              ]} />
            </div>
            <div>
              <div style={{ fontSize: 'var(--fs-caption)', letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 'var(--space-3)' }}>Prefiero que me contacten por</div>
              <div style={{ display: 'flex', gap: 'var(--space-6)' }}>
                <Radio name="via" checked={via === 'tel'} onChange={() => setVia('tel')} label="Teléfono" />
                <Radio name="via" checked={via === 'mail'} onChange={() => setVia('mail')} label="Correo" />
                <Radio name="via" checked={via === 'wa'} onChange={() => setVia('wa')} label="WhatsApp" />
              </div>
            </div>
            <Input label="Mensaje" multiline rows={4} placeholder="Me interesa conocer las etapas disponibles." />
            <Checkbox checked={ok} onChange={(e) => setOk(e.target.checked)} label="Acepto el aviso de privacidad y el tratamiento de mis datos." />
            <Button type="submit" size="lg" fullWidth disabled={!ok}>Enviar solicitud</Button>
            {sent ? <Toast tone="success" title="Solicitud enviada" onClose={() => setSent(false)}>Un asesor te contacta en menos de 24 horas.</Toast> : null}
          </form>
        </div>
      </section>

      <Dialog open={confirm} onClose={() => setConfirm(false)} eyebrow="Country Lakes" title="Confirmar solicitud"
              footer={
                <React.Fragment>
                  <Button variant="ghost" onClick={() => setConfirm(false)}>Revisar datos</Button>
                  <Button onClick={() => { setConfirm(false); setSent(true); }}>Sí, enviar</Button>
                </React.Fragment>
              }>
        Enviaremos tus datos al equipo de ventas de Boma Desarrollos para coordinar tu visita al master plan.
      </Dialog>
    </main>
  );
}