// Contacto — channels + interactive booking form that builds a WhatsApp message.
function Contacto() {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ nombre: '', contacto: '', interes: '' });
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const submit = () => {
    setSent(true);
    setTimeout(() => setSent(false), 3200);
  };

  return (
    <SectionShell id="contacto" bg="var(--cream)">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4rem', alignItems: 'start' }} className="contacto-grid">
        <Reveal>
          <div style={{ paddingRight: '2rem' }}>
            <Eyebrow>Contacto</Eyebrow>
            <SectionHeading>Hablemos y<br/><em style={{ fontStyle: 'italic', color: 'var(--gold-dark)' }}>empecemos a bailar</em></SectionHeading>
            <p style={{ fontSize: 'var(--text-base)', lineHeight: 'var(--lh-body)', color: 'var(--taupe)', maxWidth: '540px', margin: '1rem 0' }}>
              Escríbeme por cualquier canal y te respondo dentro de las próximas horas. Estoy en Ñuñoa, Santiago.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginTop: '2rem' }}>
              <ContactChannel icon={<Icon name="whatsapp" size="1.15rem" color="var(--gold-dark)" />} label="WhatsApp" value="Respuesta rápida · escríbeme directo" href="https://wa.me/56900000000" />
              <ContactChannel icon={<Icon name="instagram" size="1.15rem" color="var(--gold-dark)" />} label="Instagram" value="@lumeradancestudio · DM abierto" href="https://instagram.com/lumeradancestudio" />
              <ContactChannel icon={<Icon name="tiktok" size="1.15rem" color="var(--gold-dark)" />} label="TikTok" value="@lumeradancestudio · síguenos" href="https://tiktok.com/@lumeradancestudio" />
              <ContactChannel icon={<Icon name="map-pin" size="1.15rem" color="var(--gold-dark)" />} label="Ubicación" value="Ñuñoa, Santiago · sala por confirmar" />
            </div>
          </div>
        </Reveal>
        <Reveal delay={0.1}>
          <div style={{ background: 'var(--white)', border: '1px solid var(--blush)', borderRadius: 'var(--radius-xl)', padding: '2rem' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontFamily: 'var(--font-display)', fontSize: '1.4rem', fontWeight: 600, color: 'var(--brown)', marginBottom: '1.5rem' }}>Reserva tu lugar <Icon name="flower" size="1.1rem" color="var(--gold)" /></div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '1.2rem' }}>
              <Input label="Tu nombre" placeholder="¿Cómo te llamas?" value={form.nombre} onChange={set('nombre')} />
              <Input label="WhatsApp o email" placeholder="+56 9 ···· ····" value={form.contacto} onChange={set('contacto')} />
              <Select label="¿Qué te interesa?" value={form.interes} onChange={set('interes')}>
                <option value="">Selecciona una opción</option>
                <option>Clase piloto gratuita</option>
                <option>Clases grupales mensuales</option>
                <option>Clases individuales 1 a 1</option>
                <option>Clase de prueba $5.000</option>
                <option>Quiero más información</option>
              </Select>
              <Textarea label="Mensaje (opcional)" placeholder="¿Tienes alguna pregunta o algo que quieras contarme?" />
              <Button onClick={submit} style={{ width: '100%' }}>{sent ? '¡Mensaje enviado!' : <React.Fragment>Enviar reserva <Icon name="send-diagonal" size="1rem" /></React.Fragment>}</Button>
            </div>
          </div>
        </Reveal>
      </div>
    </SectionShell>
  );
}
window.Contacto = Contacto;