// ContactForm.jsx — formulario de contacto con envío via Formspree
function ContactForm() {
  const [form, setForm] = React.useState({ name: '', email: '', message: '' });
  const [submitted, setSubmitted] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState('');

  const set = (field) => (e) => {
    setForm((f) => ({ ...f, [field]: e.target.value }));
    if (error) setError('');
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!form.name.trim()) { setError('Escribe tu nombre.'); return; }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) { setError('Revisa el email — algo no cuadra.'); return; }
    if (!form.message.trim()) { setError('Escribe un mensaje.'); return; }

    setSending(true);
    setError('');
    try {
      await window.supabaseApi.submitContact({ name: form.name, email: form.email, message: form.message });
      setSubmitted(true);
    } catch (err) {
      setError('No se pudo enviar el mensaje. Inténtalo de nuevo.');
    } finally {
      setSending(false);
    }
  };

  return (
    <section className="im-newsletter" id="contact">
      <div className="im-newsletter-pattern" aria-hidden="true"></div>
      <div className="im-newsletter-inner im-contact-inner">
        <span className="im-eyebrow im-eyebrow-onnavy">Contacto</span>
        <h2 className="im-newsletter-title">¿Hablamos?</h2>
        <p className="im-newsletter-lead">Cuéntame qué necesitas y te responderé lo antes posible.</p>

        {submitted ? (
          <div className="im-newsletter-thanks">
            <span className="im-newsletter-tick">✓</span> Mensaje enviado. Te respondo pronto.
          </div>
        ) : (
          <form className="im-contact-form" onSubmit={onSubmit} noValidate>
            <div className="im-contact-row">
              <label className="im-contact-field">
                <span>Nombre completo</span>
                <input
                  type="text"
                  value={form.name}
                  onChange={set('name')}
                  placeholder="Isabel Muñoz"
                  className="im-newsletter-input"
                  autoComplete="name"
                  disabled={sending}
                />
              </label>
              <label className="im-contact-field">
                <span>Email</span>
                <input
                  type="email"
                  value={form.email}
                  onChange={set('email')}
                  placeholder="tu@email.com"
                  className="im-newsletter-input"
                  autoComplete="email"
                  disabled={sending}
                />
              </label>
            </div>
            <label className="im-contact-field">
              <span>Mensaje</span>
              <textarea
                value={form.message}
                onChange={set('message')}
                placeholder="Cuéntame en qué puedo ayudarte…"
                className="im-newsletter-input im-contact-textarea"
                rows={4}
                disabled={sending}
              />
            </label>
            {error && <div className="im-newsletter-error">{error}</div>}
            <button type="submit" className="im-newsletter-btn" disabled={sending}>
              {sending ? 'Enviando…' : 'Enviar mensaje →'}
            </button>
          </form>
        )}
      </div>
    </section>
  );
}

window.ContactForm = ContactForm;