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

// ============================================================
// FORM — Lead qualification
// ============================================================
function QualificationForm() {
  const [erp, setErp] = useState("");
  const [size, setSize] = useState("");
  const [maturity, setMaturity] = useState("");
  const [bottleneck, setBottleneck] = useState("");

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

  return (
    <section id="formulario" data-screen-label="Formulario">
      <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 className={`form-banner-edu ${showEduBanner ? "show" : ""}`}>
              <h4>Antes del piloto: gobernanza primero</h4>
              <p>
                Detectamos que su dotación se ubica en el segmento experimental. Le sugerimos
                descargar la guía de políticas de seguridad y uso interno de IA antes de reservar
                la llamada.
              </p>
              <a href="#" className="download-link">
                <span>↓</span> Descargar guía de políticas de seguridad (PDF · 18 págs)
              </a>
            </div>
          </div>

          <form className="form-card" onSubmit={(e) => {e.preventDefault();alert("Solicitud recibida. Nuestro equipo le contactará en 48hs hábiles.");}}>
            <h3>Formulario de contacto</h3>
            <p className="form-sub">Completa la información en 30 segundos.</p>

            <div className="field">
              <label className="field-label"><span className="field-num">01</span>Nombre completo</label>
              <input className="input" type="text" placeholder="Ej. María González" required />
            </div>


            <div className="field">
              <label className="field-label"><span className="field-num">02</span>Correo electrónico</label>
              <input className="input" type="email" placeholder="nombre@empresa.com.ar" required />
            </div>


            <div className="field">
              <label className="field-label"><span className="field-num">03</span>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"><span className="field-num">04</span>Situación actual de la IA en su 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)" }}>
                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="#formulario">Contacto</a>
          </nav>
        </div>

        <hr className="footer-divider" />

        <div className="footer-bottom-row">
          <div className="footer-left">
            <p className="footer-tag italic-touch" style={{ width: "505px" }}><em style={{ fontSize: "13px" }}>La revolución ya empezó. Algunos reaccionarán.
Otros, con un plan, liderarán. Construimos para esos pocos.
              </em></p>
            <a href="mailto:contacto@horquesta.com" className="footer-email">contacto@horquesta.com</a>
          </div>
          <span className="footer-copy">© 2026 Horquesta. Todos los derechos reservados.</span>
        </div>
      </div>
    </footer>);}
Object.assign(window, { QualificationForm, Footer });