/* CONTACTO page — form with 7 fields, matching Theorema4H model.
 * Email field replaced with insight4h@theorema4h.com on the comms side.
 */
/* global React, ReactDOM, Chrome */
const { useState: cUseState } = React;

function Form() {
  const [state, setState] = cUseState({
    nombre: "", email: "", empresa: "", cargo: "", solucion: "general", mensaje: "", privacy: false, website: "",
  });
  const [sent, setSent] = cUseState(false);
  const [sending, setSending] = cUseState(false);
  const [error, setError] = cUseState("");
  const update = (k) => (e) => setState({ ...state, [k]: e.target.type === "checkbox" ? e.target.checked : e.target.value });
  const submit = async (e) => {
    e.preventDefault();
    if (sending) return;
    setError("");
    setSending(true);
    try {
      const body = new URLSearchParams({
        nombre: state.nombre, email: state.email, empresa: state.empresa,
        cargo: state.cargo, solucion: state.solucion, mensaje: state.mensaje,
        website: state.website,
      });
      const r = await fetch("send.php", {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body,
      });
      const data = await r.json().catch(() => ({ ok: false }));
      if (r.ok && data.ok) {
        setSent(true);
      } else {
        setError("No se pudo enviar ahora mismo. Inténtalo de nuevo o escríbenos a insight4h@theorema4h.com.");
      }
    } catch (err) {
      setError("No se pudo enviar ahora mismo. Inténtalo de nuevo o escríbenos a insight4h@theorema4h.com.");
    } finally {
      setSending(false);
    }
  };

  if (sent) {
    return (
      <div className="form-thanks">
        <span className="mono">Mensaje enviado</span>
        <h3>Gracias, te contestaremos a la mayor brevedad.</h3>
        <p>Tu solicitud ha llegado al equipo de Insight4H. Atenderemos por <span className="mono">insight4h@theorema4h.com</span>.</p>
        <a className="btn btn--outline" href="Insight4H Home.html">Volver a Home</a>
      </div>
    );
  }
  return (
    <form className="contact-form" onSubmit={submit}>
      <div className="contact-form__grid">
        <label className="field">
          <span>Nombre y apellidos</span>
          <input type="text" required value={state.nombre} onChange={update("nombre")} />
        </label>
        <label className="field">
          <span>Correo electrónico</span>
          <input type="email" required value={state.email} onChange={update("email")} />
        </label>
        <label className="field">
          <span>Empresa / organización</span>
          <input type="text" value={state.empresa} onChange={update("empresa")} />
        </label>
        <label className="field">
          <span>Cargo</span>
          <input type="text" value={state.cargo} onChange={update("cargo")} />
        </label>
        <label className="field field--full">
          <span>Solución de interés</span>
          <select value={state.solucion} onChange={update("solucion")}>
            <option value="cost4h">Cost4H</option>
            <option value="market4h">Market4H</option>
            <option value="digital4h">Digital4H</option>
            <option value="social4h">Social4H</option>
            <option value="general">Información general</option>
          </select>
        </label>
        <label className="field field--full">
          <span>Mensaje</span>
          <textarea rows="6" value={state.mensaje} onChange={update("mensaje")} placeholder="Cuéntanos qué necesitas: tipo de proyecto, ámbito, plazos…" />
        </label>
        <label className="field field--full field--check">
          <input type="checkbox" required checked={state.privacy} onChange={update("privacy")} />
          <span>
            He leído y acepto la <a href="#" className="underline">política de privacidad</a>.
          </span>
        </label>
      </div>
      {/* Honeypot anti-bots (oculto a humanos) */}
      <input
        type="text" name="website" tabIndex="-1" autoComplete="off"
        value={state.website} onChange={update("website")}
        aria-hidden="true"
        style={{ position: "absolute", left: "-9999px", width: "1px", height: "1px", opacity: 0 }}
      />
      {error ? <p className="form-error" role="alert">{error}</p> : null}
      <div className="contact-form__foot">
        <button className="btn btn--primary" type="submit" disabled={sending}>
          {sending ? "Enviando…" : <>Enviar solicitud <span className="arrow">→</span></>}
        </button>
        <span className="mono">
          insight4h@theorema4h.com
        </span>
      </div>
    </form>
  );
}

function PageHero() {
  return (
    <section className="page-hero page">
      <div className="page-hero__inner">
        <h1>
          Cuéntanos qué <span className="accent-teal serif">necesitas</span>.
        </h1>
        <p className="page-hero__sub">
          ¿Quieres solicitar acceso a la plataforma, conocer el detalle de una solución
          o plantear un proyecto a medida? Escríbenos y te respondemos a la mayor brevedad.
        </p>
      </div>
    </section>
  );
}

function ContactBlock() {
  return (
    <section className="section page">
      <div className="contact-grid">
        <aside className="contact-aside">
          <h3>Insight4H</h3>
          <p>Plataforma digital de evaluación económica en salud.<br /> Powered by Theorema4H.</p>
          <ul className="contact-links">
            <li><span className="mono">Email</span><a href="mailto:insight4h@theorema4h.com">insight4h@theorema4h.com</a></li>
            <li><span className="mono">LinkedIn</span><a href="#">Theorema4H ↗</a></li>
            <li><span className="mono">Ciudad</span><span>Madrid · España</span></li>
          </ul>
        </aside>
        <Form />
      </div>
    </section>
  );
}

function App() {
  return (
    <Chrome active="contacto" transparent={false}>
      <PageHero />
      <ContactBlock />
    </Chrome>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);