/* global React */
const { useState, useEffect } = React;

// ============================================================
// FORM — Lead qualification
// ============================================================
function QualificationForm() {
  const [nombre, setNombre] = useState("");
  const [email, setEmail] = useState("");
  const [erp, setErp] = useState("");
  const [size, setSize] = useState("");
  const [maturity, setMaturity] = useState("");
  const [bottleneck, setBottleneck] = useState("");
  
  const [status, setStatus] = useState("idle"); // idle, submitting, success, error
  const [errorMessage, setErrorMessage] = useState("");

  // Auto-cierre del mensaje flotante de éxito
  useEffect(() => {
    if (status === "success") {
      const t = setTimeout(() => setStatus("idle"), 6000);
      return () => clearTimeout(t);
    }
  }, [status]);

  const showErpBanner = erp === "tango" || erp === "bejerman";
  const showEduBanner = size === "10-50" && (maturity === "" || maturity === "experimental");

  const handleSubmit = (e) => {
    e.preventDefault();
    setStatus("submitting");
    setErrorMessage("");

    fetch("send-email.php", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        nombre,
        email,
        size,
        maturity
      })
    })
    .then(response => {
      if (!response.ok) {
        throw new Error("Error en la respuesta del servidor (HTTP " + response.status + ")");
      }
      return response.json();
    })
    .then(data => {
      if (data && data.success) {
        setStatus("success");
        setNombre("");
        setEmail("");
        setSize("");
        setMaturity("");
      } else {
        setStatus("error");
        setErrorMessage(data && data.message ? data.message : "Hubo un problema al procesar su solicitud.");
      }
    })
    .catch(err => {
      console.error(err);
      setStatus("error");
      setErrorMessage("No se pudo establecer comunicación con el servidor. Intente nuevamente.");
    });
  };

  return (
    <section id="formulario" data-screen-label="Formulario">
      {status === "success" && (
        <div className="form-toast" role="status">
          <span className="form-toast-check">✓</span>
          <span>¡Gracias por tu contacto! Te responderemos lo antes posible.</span>
        </div>
      )}
      <div className="container">
        <div className="form-wrap">
          <div className="form-aside">
            <div className="eyebrow" style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase",
              fontWeight: 500, color: "var(--color-dark-charcoal)", marginBottom: 14
            }}>
              <span style={{ width: 22, height: 1, background: "var(--color-midnight-ink)" }}></span>
              Auditoria gratuita
            </div>
            <h2 className="t-h-lg ink italic-touch">
              Agenda una llamada y <em>contanos tu realidad</em>.
            </h2>
            <p>Nuestro equipo responde dentro de los 2 días hábiles. La conversación inicial y la auditoria no compromete inversión alguna.
            </p>
            <p style={{ fontSize: 14 }} className="muted">
            </p>

            <div className={`form-banner ${showErpBanner ? "show" : ""}`}>
              <div className="fb-eyebrow">Conector verificado · {erp === "tango" ? "Tango Gestión" : "Bejerman"}</div>
              <h4>Su piloto puede estar operativo en menos de 4 semanas</h4>
              <p>
                Disponemos de conectores de lectura y escritura directa sobre sus bases de datos
                impositivas. Esto reduce la fase de discovery a una sola sesión técnica.
              </p>
            </div>

          </div>

          <form className="form-card" onSubmit={handleSubmit}>
            <>
                <h3>Formulario de contacto</h3>
                <p className="form-sub">Completa la información en 30 segundos.</p>

                {status === "error" && (
                  <div className="form-status-alert error">
                    <strong>Error:</strong> {errorMessage}
                  </div>
                )}

                <div className="field">
                  <label className="field-label">Nombre completo</label>
                  <input 
                    className="input" 
                    type="text" 
                    placeholder="Ej. María González" 
                    value={nombre}
                    onChange={(e) => setNombre(e.target.value)}
                    disabled={status === "submitting"}
                    required 
                  />
                </div>

                <div className="field">
                  <label className="field-label">Correo electrónico</label>
                  <input 
                    className="input" 
                    type="email" 
                    placeholder="nombre@empresa.com.ar" 
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    disabled={status === "submitting"}
                    required 
                  />
                </div>

                <div className="field">
                  <label className="field-label">Cantidad total de empleados</label>
                  <div className="radio-grid" style={{ gridTemplateColumns: "1fr 1fr 1fr" }}>
                    <RadioTile id="size-10" name="size" label="Menos de 10" value="<10" current={size} set={setSize} />
                    <RadioTile id="size-50" name="size" label="10 a 50" value="10-50" current={size} set={setSize} />
                    <RadioTile id="size-plus" name="size" label="Más de 50" value="50+" current={size} set={setSize} />
                  </div>
                </div>

                <div className="field">
                  <label className="field-label">Situación actual de la IA en tu organización</label>
                  <div className="radio-grid" style={{ gridTemplateColumns: "1fr" }}>
                    <RadioTile id="mat-sin" name="mat" label="Sin adopción · No utilizamos ningún tipo de IA actualmente" value="sin" current={maturity} set={setMaturity} />
                    <RadioTile id="mat-exp" name="mat" label="Experimental · Empleamos IA de forma aislada, informal, sin integración" value="experimental" current={maturity} set={setMaturity} />
                    <RadioTile id="mat-opt" name="mat" label="Optimizadora · Creemos tener todo listo para implementar Agentes." value="optimizadora" current={maturity} set={setMaturity} />
                  </div>
                </div>

                <div className="form-submit">
                  <p className="form-foot">
                    Al enviar, aceptás el tratamiento confidencial de la información provista para fines comerciales únicamente.
                  </p>
                  <button 
                    type="submit" 
                    className="btn btn-primary" 
                    style={{ backgroundColor: "rgb(72, 101, 255)" }}
                    disabled={status === "submitting"}
                  >
                    {status === "submitting" ? "Enviando..." : "Reservar llamada"}
                    <span aria-hidden="true">→</span>
                  </button>
                </div>
              </>
          </form>
        </div>
      </div>
    </section>
  );
}

function RadioTile({ id, name, label, value, current, set }) {
  const selected = current === value;
  return (
    <label htmlFor={id} className={`radio-tile ${selected ? "selected" : ""}`}>
      <input
        type="radio"
        id={id}
        name={name}
        value={value}
        checked={selected}
        onChange={() => set(value)}
        style={{ position: "absolute", opacity: 0, pointerEvents: "none" }} />
      
      <span className="radio-dot"></span>
      <span>{label}</span>
    </label>);

}

// ============================================================
// FOOTER
// ============================================================
function Footer() {
  return (
    <footer className="footer" data-screen-label="Footer" style={{ backgroundColor: "rgb(8, 3, 49)", padding: "30px 0px 32px" }}>
      <div className="container">
        <div className="footer-top-row">
          <a className="footer-logo" href="/#top">
            <img className="nav-mark" src="varita_negro.png" alt="" style={{ filter: "invert(1)" }} />
            <span>Horquesta</span>
          </a>
          <nav className="footer-nav">
            <a href="/#modulos">Servicios</a>
            <a href="/#metodo">Método</a>
            <a href="/casos">Casos</a>
            <a href="/#formulario">Contacto</a>
          </nav>
        </div>

        <div className="footer-quote">
          <p className="footer-quote-text">"El mayor obstáculo no suele ser el costo ni el acceso a la tecnología, sino la ausencia de conocimiento que traduzca las herramientas disponibles a los procesos concretos de cada empresa."</p>
          <p className="footer-quote-cite">— Informe nadIA, Encuesta Nacional de Adopción de IA en PyMEs Argentinas (2026).</p>
        </div>

        <hr className="footer-divider" />

        <div className="footer-bottom-row">
          <span className="footer-copy">© 2026 Horquesta. Todos los derechos reservados.</span>
          <div className="footer-social">
            <a href="https://www.linkedin.com/company/horquesta" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" aria-hidden="true"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14zM8.34 18.34v-7.2H6v7.2h2.34zM7.17 9.9a1.36 1.36 0 1 0 0-2.72 1.36 1.36 0 0 0 0 2.72zM18 18.34v-3.95c0-2.11-1.13-3.09-2.63-3.09-1.21 0-1.75.66-2.05 1.13v-.97h-2.34v7.2h2.34v-4.02c0-.21.02-.42.08-.57.16-.42.55-.86 1.19-.86.84 0 1.17.64 1.17 1.57v3.88H18z" /></svg>
            </a>
            <a href="https://www.instagram.com/horquesta.ia/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r="1.2" fill="currentColor" stroke="none" /></svg>
            </a>
          </div>
        </div>
      </div>
    </footer>);}
Object.assign(window, { QualificationForm, Footer });