function Contact() {
  const [form, setForm] = React.useState({
    name: '', email: '', company: '', service: '', message: '', rgpd: false,
  });
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const WEBHOOK_URL = 'https://hook.eu1.make.com/3kd1ixmndj4rirzb34q84seedpybr4ow';

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!form.rgpd) return;
    setStatus('sending');
    try {
      if (WEBHOOK_URL) {
        await fetch(WEBHOOK_URL, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ ...form, source: 'web', ts: new Date().toISOString() }),
        });
      } else {
        await new Promise((r) => setTimeout(r, 900));
      }
      setStatus('sent');
    } catch {
      setStatus('error');
    }
  };

  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value });

  return (
    <section id="contacto">
      <div className="container">
        <Reveal><SectionLabel>06 / Hablemos</SectionLabel></Reveal>
        <Reveal delay={80}>
          <h2 style={{ maxWidth: 800, marginBottom: 48 }}>
            Cuéntame qué necesitas.<br/>
            Te respondo en <span className="gradient-text">menos de 24h</span>.
          </h2>
        </Reveal>

        <Reveal delay={140} className="card contact-card with-glow">
          {status === 'sent' ? (
            <div style={{ gridColumn: '1 / -1', textAlign: 'center', padding: '60px 0' }}>
              <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--grad-ai)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'white', marginBottom: 20 }}>
                {I.check}
              </div>
              <h3 style={{ fontSize: '1.6rem', marginBottom: 12 }}>¡Mensaje recibido!</h3>
              <p style={{ color: 'var(--fg-dim)', maxWidth: 460, margin: '0 auto' }}>
                En breve recibirás un email de confirmación con los siguientes pasos.
                Te contesto personalmente en menos de 24h hábiles.
              </p>
            </div>
          ) : (
            <>
              <form className="contact-form" onSubmit={onSubmit}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <div className="field">
                    <label>Nombre *</label>
                    <input required value={form.name} onChange={upd('name')} placeholder="María García" />
                  </div>
                  <div className="field">
                    <label>Email *</label>
                    <input required type="email" value={form.email} onChange={upd('email')} placeholder="maria@empresa.com" />
                  </div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <div className="field">
                    <label>Empresa / proyecto</label>
                    <input value={form.company} onChange={upd('company')} placeholder="Acme S.L." />
                  </div>
                  <div className="field">
                    <label>Servicio de interés</label>
                    <select value={form.service} onChange={upd('service')}>
                      <option value="">Aún no lo sé</option>
                      <option>Automatización de procesos</option>
                      <option>Web / landing</option>
                      <option>Chatbot</option>
                      <option>Generación documental</option>
                      <option>Análisis y dashboards</option>
                      <option>Otro / a medida</option>
                    </select>
                  </div>
                </div>
                <div className="field">
                  <label>Cuéntame brevemente *</label>
                  <textarea required value={form.message} onChange={upd('message')} placeholder="¿Qué quieres resolver? ¿Plazos aproximados? Cuanto más concreto, mejor te puedo orientar." />
                </div>
                <label className="checkbox-row">
                  <input type="checkbox" checked={form.rgpd} onChange={upd('rgpd')} />
                  <span>He leído y acepto la <a href="/privacidad" style={{ color: 'var(--c1)' }}>política de privacidad</a>. Mis datos se tratan según RGPD para gestionar esta consulta y nada más.</span>
                </label>
                <div className="submit-row">
                  <button type="submit" className="btn btn-primary" disabled={status === 'sending' || !form.rgpd} style={{ opacity: form.rgpd ? 1 : 0.5 }}>
                    {status === 'sending' ? 'Enviando…' : 'Enviar mensaje'} <span className="arrow">↗</span>
                  </button>
                  {status === 'error' && <span style={{ color: 'var(--c3)', fontSize: '0.88rem' }}>Hubo un error. Inténtalo de nuevo o escríbeme directamente.</span>}
                </div>
              </form>

              <aside style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
                <div>
                  <div className="mono" style={{ color: 'var(--fg-dim)', marginBottom: 8 }}>Email directo</div>
                  <a href="mailto:enric@generativesolutions.es" style={{ fontSize: '1.05rem', color: 'var(--fg)' }}>enric@generativesolutions.es</a>
                </div>
                <div>
                  <div className="mono" style={{ color: 'var(--fg-dim)', marginBottom: 8 }}>Ubicación</div>
                  <div style={{ fontSize: '1.05rem' }}>Alaquàs · Valencia</div>
                  <div style={{ color: 'var(--fg-dim)', fontSize: '0.9rem', marginTop: 4 }}>Trabajo 100% remoto en toda España.</div>
                </div>
                <div>
                  <div className="mono" style={{ color: 'var(--fg-dim)', marginBottom: 8 }}>Tiempos de respuesta</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: '0.95rem' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: 'var(--fg-dim)' }}>Email</span><span>&lt; 24h</span></div>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: 'var(--fg-dim)' }}>Llamada</span><span>2-3 días</span></div>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: 'var(--fg-dim)' }}>Propuesta</span><span>5-7 días</span></div>
                  </div>
                </div>
                <div style={{ padding: 18, borderRadius: 14, background: 'var(--card)', border: '1px solid var(--line)' }}>
                  <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 8 }}>
                    <span style={{ color: 'var(--c1)' }}>{I.shield}</span>
                    <strong style={{ fontSize: '0.95rem' }}>Tu negocio, protegido y al día</strong>
                  </div>
                  <p style={{ fontSize: '0.85rem', color: 'var(--fg-dim)' }}>
                    RGPD, LSSI y nueva normativa europea de IA. Documentación incluida en cada proyecto.
                  </p>
                </div>
              </aside>
            </>
          )}
        </Reveal>
      </div>
    </section>
  );
}
window.Contact = Contact;