// Modal de contacto: solicitud de la demo gratuita. Incluye honeypot (_hp)
// contra bots; la validación real ocurre en el Worker.
const FORM0_CONTACTO = { nombre: '', email: '', telefono: '', privacidad: false, _hp: '' };
const { useState: useStateContacto } = React;

function ContactoModal({ open, onClose }) {
  const [form, setForm] = useStateContacto(FORM0_CONTACTO);
  const [enviando, setEnviando] = useStateContacto(false);
  const [enviado, setEnviado] = useStateContacto(false);
  const [error, setError] = useStateContacto(null);

  if (!open) return null;

  const updateField = (campo, valor) => setForm((f) => ({ ...f, [campo]: valor }));

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!form.privacidad) {
      setError(window.t('modal.privacyErr'));
      return;
    }
    setEnviando(true);
    setError(null);
    try {
      await window.api.enviarContacto(form);
      setEnviado(true);
    } catch (err) {
      setError(err.message);
    } finally {
      setEnviando(false);
    }
  };

  const handleClose = () => {
    onClose();
    setTimeout(() => {
      setForm(FORM0_CONTACTO);
      setEnviado(false);
      setError(null);
    }, 200);
  };

  return (
    <div className="modal-overlay" onClick={handleClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button type="button" className="modal__close" onClick={handleClose} aria-label={window.t('modal.close')}>×</button>

        {enviado ? (
          <>
            <h3>{window.t('modal.doneTitle')}</h3>
            <p className="modal__sub">{window.t('modal.doneSub')}</p>
          </>
        ) : (
          <>
            <h3>{window.t('modal.title')}</h3>
            <p className="modal__sub">{window.t('modal.sub')}</p>

            <form onSubmit={handleSubmit}>
              <div className="field">
                <label htmlFor="ct-nombre">{window.t('modal.name')}</label>
                <input id="ct-nombre" type="text" required value={form.nombre}
                  onChange={(e) => updateField('nombre', e.target.value)} />
              </div>
              <div className="field">
                <label htmlFor="ct-email">{window.t('modal.email')}</label>
                <input id="ct-email" type="email" required value={form.email}
                  onChange={(e) => updateField('email', e.target.value)} />
              </div>
              <div className="field">
                <label htmlFor="ct-telefono">{window.t('modal.phone')}</label>
                <input id="ct-telefono" type="tel" value={form.telefono}
                  onChange={(e) => updateField('telefono', e.target.value)} />
              </div>

              <div className="field field--hp" aria-hidden="true">
                <label htmlFor="ct-hp">{window.t('modal.hp')}</label>
                <input id="ct-hp" type="text" tabIndex={-1} autoComplete="off" value={form._hp}
                  onChange={(e) => updateField('_hp', e.target.value)} />
              </div>

              <div className="field field--check">
                <input id="ct-privacidad" type="checkbox" checked={form.privacidad}
                  onChange={(e) => updateField('privacidad', e.target.checked)} />
                <label htmlFor="ct-privacidad" dangerouslySetInnerHTML={window.tHtml('modal.privacy')} />
              </div>

              <button type="submit" className="btn btn--accent" disabled={enviando}>
                {enviando ? window.t('modal.sending') : window.t('modal.send')}
              </button>

              {error && <p className="modal__status modal__status--error">{error}</p>}
            </form>
          </>
        )}
      </div>
    </div>
  );
}