function Contacto() {
  const [servicio, setServicio] = React.useState('Producto');
  const [errors, setErrors] = React.useState({});
  const [loading, setLoading] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  const [submitError, setSubmitError] = React.useState(false);
  const formRef = React.useRef(null);

  const services = [
    { key: 'Estrategia', suit: '♠' },
    { key: 'Identidad', suit: '♣' },
    { key: 'Producto', suit: '♦' },
    { key: 'Crecimiento', suit: '♥' },
  ];

  const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  const clearError = (field) => {
    if (errors[field]) setErrors((prev) => ({ ...prev, [field]: false }));
  };

  const handleEmailBlur = (e) => {
    const val = e.target.value;
    if (val && !EMAIL_RE.test(val)) {
      setErrors((prev) => ({ ...prev, email: 'format' }));
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const form = formRef.current;
    const nombre = form.elements['nombre'].value;
    const email = form.elements['email'].value;

    const errs = {};
    if (!nombre.trim()) errs.nombre = true;
    if (!email.trim()) {
      errs.email = 'required';
    } else if (!EMAIL_RE.test(email)) {
      errs.email = 'format';
    }
    if (Object.keys(errs).length > 0) {
      setErrors(errs);
      return;
    }

    setErrors({});
    setLoading(true);
    setSubmitError(false);

    try {
      const res = await fetch('https://formspree.io/f/mgorqyen', {
        method: 'POST',
        body: new FormData(form),
        headers: { Accept: 'application/json' },
      });
      if (res.ok) {
        setSent(true);
      } else {
        setSubmitError(true);
      }
    } catch (_) {
      setSubmitError(true);
    } finally {
      setLoading(false);
    }
  };

  if (sent) {
    return (
      <section className="contacto" id="contacto">
        <div style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center',
          justifyContent: 'center', textAlign: 'center',
          padding: '120px 24px', minHeight: '60vh',
        }}>
          <div style={{ fontSize: '5rem', color: 'var(--accent)', lineHeight: 1, marginBottom: '32px' }}>♠</div>
          <h3 style={{ fontSize: 'clamp(1.5rem, 3vw, 2.25rem)', fontWeight: 600, color: 'var(--cream)', marginBottom: '16px', letterSpacing: '-0.02em' }}>
            Tu jugada está en marcha.
          </h3>
          <p style={{ color: 'rgba(244,239,230,0.65)', fontSize: '1.0625rem' }}>
            Te contactamos en menos de 24 horas.
          </p>
        </div>
      </section>
    );
  }

  const errorStyle = { color: '#C8102E', fontSize: '0.75rem', marginTop: '6px', display: 'block', fontFamily: 'var(--font-mono, monospace)' };
  const inputErrorBorder = { borderColor: '#C8102E' };

  return (
    <section className="contacto" id="contacto">
      <div className="contacto__inner">
        <div className="contacto__head">
          <div>
            <div className="eyebrow reveal" style={{ color: 'rgba(244,239,230,0.6)' }}>07 · Iniciar jugada</div>
            <h2 className="h-section contacto__title reveal" style={{ marginTop: 24, '--delay': '100ms' }}>
              Pon tu carta<br/><em>sobre la mesa.</em>
            </h2>
          </div>
          <p className="lede reveal" style={{ '--delay': '200ms' }}>
            Cuéntanos qué jugada estás armando. Respondemos en menos de 24 horas con una propuesta inicial o una sesión de diagnóstico.
          </p>
        </div>

        <form id="contact-form" className="contacto__form" ref={formRef} onSubmit={handleSubmit} noValidate>
          <div className="field">
            <label className="field__label"><span className="field__label-num">01</span> Nombre completo</label>
            <input
              className="field__input"
              type="text"
              name="nombre"
              placeholder="¿Cómo te llamamos?"
              onInput={() => clearError('nombre')}
              style={errors.nombre ? inputErrorBorder : {}}
            />
            {errors.nombre && <span style={errorStyle}>Este campo es requerido</span>}
          </div>

          <div className="field field--right">
            <label className="field__label"><span className="field__label-num">02</span> Email</label>
            <input
              className="field__input"
              type="email"
              name="email"
              placeholder="tu@correo.com"
              onInput={() => clearError('email')}
              onBlur={handleEmailBlur}
              style={errors.email ? inputErrorBorder : {}}
            />
            {errors.email === 'required' && <span style={errorStyle}>Este campo es requerido</span>}
            {errors.email === 'format' && <span style={errorStyle}>Ingresa un correo válido, por ejemplo: hola@tuempresa.com</span>}
          </div>

          <div className="field field--full">
            <label className="field__label"><span className="field__label-num">03</span> Tipo de servicio</label>
            <div className="field__chips">
              {services.map((s) => (
                <button type="button" key={s.key}
                  className={`chip ${servicio === s.key ? 'active' : ''}`}
                  onClick={() => setServicio(s.key)} data-hover>
                  <span className="chip__suit">{s.suit}</span>
                  <span>{s.key}</span>
                </button>
              ))}
            </div>
            <input type="hidden" name="servicio" value={servicio} />
          </div>

          <div className="field field--full">
            <label className="field__label"><span className="field__label-num">04</span> Cuéntanos tu jugada</label>
            <textarea className="field__textarea" rows="3" name="mensaje" placeholder="Una línea sobre el negocio, el reto y dónde están hoy." />
          </div>

          {submitError && (
            <p style={{ color: '#C8102E', fontSize: '0.875rem', marginBottom: '16px', fontFamily: 'var(--font-mono, monospace)' }}>
              Algo falló. Intenta de nuevo o escríbenos directo.
            </p>
          )}

          <div className="contacto__submit">
            <button
              className="submit-btn"
              type="submit"
              data-hover
              disabled={loading}
              style={loading ? { opacity: 0.6, cursor: 'not-allowed' } : {}}
            >
              <span>{loading ? 'Enviando...' : 'Enviar jugada'}</span>
              {!loading && <span className="submit-btn__icon">→</span>}
            </button>
            <p className="contacto__legal">Al enviar aceptas nuestra política de privacidad. No spam, palabra de partner.</p>
          </div>
        </form>
      </div>
    </section>
  );
}
window.Contacto = Contacto;