// Contact.jsx — info + validating form
function Contact() {
  const [form, setForm] = React.useState({
    nombre: '', email: '', tel: '', especialidad: '', plan: 'No estoy seguro', mensaje: ''
  });
  const [errors, setErrors] = React.useState({});
  const [touched, setTouched] = React.useState({});
  const [sent, setSent] = React.useState(false);

  const validate = (state = form) => {
    const e = {};
    if (!state.nombre.trim()) e.nombre = 'Cuéntanos cómo te llamas.';
    if (!state.email.trim()) e.email = 'Necesitamos un correo para responderte.';
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(state.email)) e.email = 'Ese correo no se ve correcto.';
    if (state.tel.trim() && !/^[+\d\s\-()]{8,}$/.test(state.tel)) e.tel = 'Solo números, espacios y guiones.';
    if (!state.especialidad.trim()) e.especialidad = 'Tu especialidad nos ayuda a preparar la sesión.';
    return e;
  };

  const set = (k) => (e) => {
    const next = { ...form, [k]: e.target.value };
    setForm(next);
    if (touched[k]) {
      const all = validate(next);
      setErrors(all);
    }
  };
  const onBlur = (k) => () => {
    setTouched({ ...touched, [k]: true });
    setErrors(validate());
  };

  const submit = (e) => {
    e.preventDefault();
    const all = validate();
    setErrors(all);
    setTouched({ nombre: true, email: true, tel: true, especialidad: true });
    if (Object.keys(all).length === 0) {
      setSent(true);
      setTimeout(() => {
        setSent(false);
        setForm({ nombre: '', email: '', tel: '', especialidad: '', plan: 'No estoy seguro', mensaje: '' });
        setTouched({});
      }, 6500);
    }
  };

  return (
    <section id="contacto" className="section" data-screen-label="06 Contacto">
      <div className="section__inner contact">
        <div className="contact__copy">
          <span className="section__eyebrow">Hablemos</span>
          <h2 className="section__title">
            ¿Lista para llenar tu <em>sala de espera</em>?
          </h2>
          <p className="section__lead" style={{maxWidth: 460}}>
            El diagnóstico inicial es gratuito y dura 30 minutos.
            Sales con tres recomendaciones concretas, trabajemos juntos o no.
          </p>

          <ul className="contact__lines">
            <li>
              <span className="contact__line-icon"><Icon name="whatsapp" size={20}/></span>
              <span className="contact__line-text">
                <span className="contact__line-label">WhatsApp directo</span>
                <a href="https://wa.link/0veemt" target="_blank" rel="noopener">Escríbeme por WhatsApp</a>
              </span>
            </li>
            <li>
              <span className="contact__line-icon"><Icon name="instagram" size={20}/></span>
              <span className="contact__line-text">
                <span className="contact__line-label">Instagram</span>
                <a href="https://www.instagram.com/danielacabrera_mkt/" target="_blank" rel="noopener">@danielacabrera_mkt</a>
              </span>
            </li>
            <li>
              <span className="contact__line-icon"><Icon name="map-pin" size={20}/></span>
              <span className="contact__line-text">
                <span className="contact__line-label">Base de operaciones</span>
                <a href="#" style={{cursor:'default'}}>Tampico, Tamaulipas · Toda la República</a>
              </span>
            </li>
          </ul>
        </div>

        <form className="contact__form-card" onSubmit={submit} noValidate>
          <div className="contact__form-row">
            <div className={'field ' + (errors.nombre && touched.nombre ? 'field--error' : '')}>
              <label className="field__label" htmlFor="f-nombre">Nombre completo</label>
              <input id="f-nombre" type="text" value={form.nombre} onChange={set('nombre')} onBlur={onBlur('nombre')} placeholder="Dra. María González"/>
              {errors.nombre && touched.nombre && <span className="field__error"><Icon name="x" size={12}/> {errors.nombre}</span>}
            </div>
            <div className={'field ' + (errors.especialidad && touched.especialidad ? 'field--error' : '')}>
              <label className="field__label" htmlFor="f-esp">Especialidad</label>
              <input id="f-esp" type="text" value={form.especialidad} onChange={set('especialidad')} onBlur={onBlur('especialidad')} placeholder="Dermatología"/>
              {errors.especialidad && touched.especialidad && <span className="field__error"><Icon name="x" size={12}/> {errors.especialidad}</span>}
            </div>
          </div>

          <div className="contact__form-row">
            <div className={'field ' + (errors.email && touched.email ? 'field--error' : '')}>
              <label className="field__label" htmlFor="f-email">Correo</label>
              <input id="f-email" type="email" value={form.email} onChange={set('email')} onBlur={onBlur('email')} placeholder="hola@tuconsultorio.mx"/>
              {errors.email && touched.email && <span className="field__error"><Icon name="x" size={12}/> {errors.email}</span>}
            </div>
            <div className={'field ' + (errors.tel && touched.tel ? 'field--error' : '')}>
              <label className="field__label" htmlFor="f-tel">Teléfono <span style={{textTransform:'none',letterSpacing:0,color:'var(--ink-300)',fontWeight:500}}>(opcional)</span></label>
              <input id="f-tel" type="tel" value={form.tel} onChange={set('tel')} onBlur={onBlur('tel')} placeholder="833 000 00 00"/>
              {errors.tel && touched.tel && <span className="field__error"><Icon name="x" size={12}/> {errors.tel}</span>}
            </div>
          </div>

          <div className="field">
            <label className="field__label" htmlFor="f-plan">Plan de interés</label>
            <select id="f-plan" className="field__select" value={form.plan} onChange={set('plan')}>
              <option>No estoy seguro</option>
              <option>Básico — 4 publicaciones</option>
              <option>Pro — 8 publicaciones</option>
              <option>Intermedio — 12 publicaciones</option>
              <option>Quiero algo a la medida</option>
            </select>
          </div>

          <div className="field">
            <label className="field__label" htmlFor="f-msg">Cuéntame sobre tu consulta <span style={{textTransform:'none',letterSpacing:0,color:'var(--ink-300)',fontWeight:500}}>(opcional)</span></label>
            <textarea id="f-msg" rows="3" value={form.mensaje} onChange={set('mensaje')} placeholder="¿Qué resultados buscas? ¿Qué has intentado antes?"></textarea>
          </div>

          <Button variant="primary" size="lg" className="contact__submit" onClick={submit}>
            Reservar diagnóstico gratuito
            <Icon name="arrow-right" size={16} strokeWidth={2}/>
          </Button>

          {sent && (
            <div className="contact__success" role="status">
              <span className="contact__success-icon"><Icon name="check" size={16} strokeWidth={3}/></span>
              <div className="contact__success-text">
                <strong>¡Mensaje enviado!</strong>
                <span>Te respondo en menos de 24 horas hábiles. Mientras tanto, también puedes escribirme por WhatsApp.</span>
              </div>
            </div>
          )}
        </form>
      </div>
    </section>
  );
}

window.Contact = Contact;