/* Solicitar diagnóstico — página de conversión Enterprise (misma identidad que Home) */
const { useState, useEffect, useRef } = React;

const HOME_CT = "/";
const COMO_CT = "Cómo funciona.html";
const PLANES_CT = "Ver planes disponibles.html";
// FormSubmit reenvía cada solicitud a este correo. Tras confirmarlo, cambie el correo por el alias que le da FormSubmit para no publicarlo.
const FORM_ENDPOINT = "https://formsubmit.co/ajax/maycolabarias@gmail.com";

/* ---------------- NAV ---------------- */
function NavCT() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 16);
    on(); window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <header className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="wrap nav-inner">
        <a className="brand" href={HOME_CT}>
          <img src="assets/logo-dark.png" alt="Bacatá Dynamics" />
          <b>Bacatá Dynamics</b>
        </a>
        <div className="nav-cta">
          <LangToggle />
          <a className="nav-back" href={HOME_CT}><Icon.arrow /> Volver al inicio</a>
          <a className="btn btn-ghost" href={PLANES_CT}>Ver planes</a>
        </div>
      </div>
    </header>
  );
}

/* ---------------- DATOS ---------------- */
const COLAB_OPTS = ["1 – 10", "11 – 50", "51 – 200", "201 – 1.000", "Más de 1.000"];
const INDUSTRIAS = ["Servicios financieros", "Retail & e-commerce", "Manufactura & industria", "Salud & farma", "Logística & transporte", "Energía & utilities", "Tecnología & SaaS", "Sector público", "Educación", "Otra"];
const PROBLEMAS = ["Procesos manuales", "Datos dispersos", "Sistemas heredados", "Falta de capacidad técnica", "Integraciones complejas", "Reportería lenta", "Escalar un producto", "Adopción de IA"];
const PRESUPUESTOS = [
  { v: "< $5K", s: "/ mes" },
  { v: "$5K – $15K", s: "/ mes" },
  { v: "$15K – $40K", s: "/ mes" },
  { v: "Por definir", s: "lo vemos juntos" },
];

const PASOS = [
  { n: "1", t: "Diagnóstico gratuito", w: "Sin costo", d: "Una sesión de 30 min para entender su contexto, sistemas y prioridades." },
  { n: "2", t: "Propuesta en 48 horas", w: "48 h", d: "Alcance, equipo sugerido y plan de trabajo, en menos de dos días hábiles." },
  { n: "3", t: "Onboarding en una semana", w: "1 semana", d: "Equipo asignado, accesos y herramientas listas para empezar a ejecutar." },
  { n: "4", t: "Inicio de ejecución", w: "Continuo", d: "Primeras entregas en su backlog, con avance visible mes a mes." },
];

/* ---------------- HERO ---------------- */
function HeroCT() {
  return (
    <section className="ct-hero" data-screen-label="Hero contacto">
      <div className="wrap ct-hero-inner">
        <span className="kicker reveal in">Contacto Enterprise</span>
        <h1 className="reveal in d1">Conversemos sobre sus <span className="flow">próximos proyectos.</span></h1>
        <p className="ct-hero-sub reveal in d2">
          Cuéntenos dónde está hoy y a dónde quiere llegar. Preparamos un diagnóstico
          estratégico y una propuesta de capacidad técnica hecha a la medida de su empresa.
        </p>
        <div className="ct-hero-trust reveal in d3">
          <span className="ct-trust-item"><Icon.shield width="18" height="18" /> Información confidencial</span>
          <span className="ct-trust-item"><Icon.clock width="18" height="18" /> Respuesta en menos de 4 h</span>
          <span className="ct-trust-item"><Icon.spark /> Sin compromiso</span>
        </div>
      </div>
    </section>
  );
}

/* ---------------- FORMULARIO ---------------- */
function DiagForm() {
  const [sent, setSent] = useState(false);
  const [problemas, setProblemas] = useState([]);
  const [presu, setPresu] = useState(null);

  const toggleProblema = (p) =>
    setProblemas((cur) => cur.includes(p) ? cur.filter((x) => x !== p) : [...cur, p]);

  const [enviando, setEnviando] = useState(false);
  const [error, setError] = useState("");

  const onSubmit = async (e) => {
    e.preventDefault();
    setEnviando(true); setError("");
    const datos = Object.fromEntries(new FormData(e.target));
    try {
      const r = await fetch(FORM_ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          ...datos,
          problemas: problemas.join(", ") || "—",
          _subject: `Diagnóstico: ${datos.empresa} (${datos.nombre})`,
          _replyto: datos.email,
          _template: "table",
          _captcha: "false",
        }),
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok || String(j.success) !== "true") throw new Error(j.message);
      setSent(true);
      window.scrollTo({ top: 0, behavior: "smooth" });
    } catch {
      setError("No pudimos enviar su solicitud. Intente de nuevo en unos minutos.");
    } finally {
      setEnviando(false);
    }
  };

  if (sent) {
    return (
      <div className="ct-form-card reveal in" id="formulario">
        <div className="ct-success">
          <div className="ct-success-badge"><Icon.check width="34" height="34" /></div>
          <h3>Recibimos su solicitud.</h3>
          <p>Un líder técnico de Bacatá Dynamics revisará su contexto y le escribirá para
            agendar el diagnóstico estratégico. Gracias por confiar en nosotros.</p>
          <div className="ct-success-meta"><Icon.clock width="18" height="18" /> Tiempo promedio de respuesta: menos de 4 horas</div>
        </div>
      </div>
    );
  }

  return (
    <form className="ct-form-card reveal in" id="formulario" onSubmit={onSubmit}>
      {/* Sobre usted */}
      <fieldset className="ct-fieldset">
        <legend className="ct-legend"><span className="ct-step-dot">1</span> Sobre usted</legend>
        <div className="ct-row">
          <div className="ct-field">
            <label htmlFor="f-nombre">Nombre completo</label>
            <input className="ct-input" id="f-nombre" name="nombre" type="text" placeholder="Ej. María Gómez" required />
          </div>
          <div className="ct-field">
            <label htmlFor="f-cargo">Cargo</label>
            <input className="ct-input" id="f-cargo" name="cargo" type="text" placeholder="Ej. Directora de Operaciones" required />
          </div>
        </div>
        <div className="ct-field">
          <label htmlFor="f-email">Correo electrónico</label>
          <input className="ct-input" id="f-email" name="email" type="email" placeholder="Ej. maria.gomez@empresa.com" required />
        </div>
      </fieldset>

      {/* Sobre su empresa */}
      <fieldset className="ct-fieldset">
        <legend className="ct-legend"><span className="ct-step-dot">2</span> Sobre su empresa</legend>
        <div className="ct-row">
          <div className="ct-field">
            <label htmlFor="f-empresa">Empresa</label>
            <input className="ct-input" id="f-empresa" name="empresa" type="text" placeholder="Nombre de la empresa" required />
          </div>
          <div className="ct-field">
            <label htmlFor="f-colab">Número de colaboradores</label>
            <select className="ct-select placeholder" id="f-colab" name="colaboradores" defaultValue="" required
              onChange={(e) => e.target.classList.toggle("placeholder", !e.target.value)}>
              <option value="" disabled>Seleccione un rango</option>
              {COLAB_OPTS.map((o) => <option key={o} value={o}>{o}</option>)}
            </select>
          </div>
        </div>
        <div className="ct-field">
          <label htmlFor="f-industria">Industria</label>
          <select className="ct-select placeholder" id="f-industria" name="industria" defaultValue="" required
            onChange={(e) => e.target.classList.toggle("placeholder", !e.target.value)}>
            <option value="" disabled>Seleccione su industria</option>
            {INDUSTRIAS.map((o) => <option key={o} value={o}>{o}</option>)}
          </select>
        </div>
      </fieldset>

      {/* Sobre el proyecto */}
      <fieldset className="ct-fieldset">
        <legend className="ct-legend"><span className="ct-step-dot">3</span> Sobre el proyecto</legend>

        <div className="ct-field">
          <label className="ct-block-label">Problemas actuales <span className="opt">· seleccione los que apliquen</span></label>
          <div className="ct-chips" role="group" aria-label="Problemas actuales">
            {PROBLEMAS.map((p) => {
              const on = problemas.includes(p);
              return (
                <button type="button" key={p} className="ct-chip" aria-pressed={on} onClick={() => toggleProblema(p)}>
                  <span className="ct-chip-check">{on && <Icon.check width="12" height="12" />}</span>{p}
                </button>
              );
            })}
          </div>
        </div>

        <div className="ct-field">
          <label htmlFor="f-objetivos">Objetivos <span className="opt">· ¿qué resultado busca en los próximos meses?</span></label>
          <textarea className="ct-textarea" id="f-objetivos" name="objetivos"
            placeholder="Ej. Automatizar el cierre contable, lanzar un portal para clientes y poner la IA a trabajar sobre nuestros datos." required></textarea>
        </div>

      </fieldset>

      <div className="ct-submit-row">
        {/* Trampa para bots: un humano nunca la ve ni la llena. */}
        <input type="text" name="_honey" tabIndex="-1" autoComplete="off" style={{ display: "none" }} />
        <button type="submit" className="btn btn-primary btn-lg" disabled={enviando}>
          {enviando ? "Enviando…" : <React.Fragment>Solicitar diagnóstico estratégico <Icon.arrow /></React.Fragment>}
        </button>
        {error && <p className="ct-reassure" role="alert" style={{ color: "#c0262d" }}>{error}</p>}
        <p className="ct-reassure"><Icon.shield width="15" height="15" /> Sus datos son confidenciales. No comparta información sensible en este formulario.</p>
      </div>
    </form>
  );
}

/* ---------------- SIDEBAR ---------------- */
const REFUERZOS = [
  { t: "Diagnóstico sin costo", d: "La primera sesión es gratuita y sin ningún compromiso de contratación." },
  { t: "Le responde un líder técnico", d: "No un bot ni un comercial: habla con quien entiende su problema." },
  { t: "Sus datos están protegidos", d: "Tratamos su información de forma confidencial y segura." },
];

function ReassureCard() {
  return (
    <div className="ct-card ct-cal-card">
      <div className="ct-card-title"><Icon.shield width="20" height="20" /> Está a un paso de empezar</div>
      <p className="ct-cal-sub">Tomarse un minuto en llenar este formulario es el primer paso para mejorar su productividad y su EBITDA. Esto es lo que puede esperar de nosotros.</p>

      <div className="ct-reassure-list">
        {REFUERZOS.map((r) => (
          <div className="ct-reassure-item" key={r.t}>
            <div className="ct-reassure-ico"><Icon.check width="16" height="16" /></div>
            <div className="ct-reassure-txt"><b>{r.t}</b><span>{r.d}</span></div>
          </div>
        ))}
      </div>

      <figure className="ct-quote">
        <Icon.spark width="22" height="22" />
        <blockquote>“En la primera reunión ya tenían claro qué automatizar primero. En semanas vimos avances que llevábamos un año posponiendo.”</blockquote>
        <figcaption><b>Andrés Villamil</b><span>COO · empresa de logística</span></figcaption>
      </figure>
    </div>
  );
}

function AsideCT() {
  return (
    <aside className="ct-aside" data-screen-label="Sección lateral">
      <div className="ct-card reveal">
        <div className="ct-card-title"><FlowWave variant="glyph" style={{ width: 16, height: 22, color: "var(--c-blue)" }} /> Qué ocurre después</div>
        <div className="ct-timeline">
          {PASOS.map((p) => (
            <div className="ct-tl-item" key={p.n}>
              <div className="ct-tl-rail">
                <div className="ct-tl-num">{p.n}</div>
                <div className="ct-tl-line"></div>
              </div>
              <div className="ct-tl-body">
                <h4>{p.t}<span className="ct-tl-when">{p.w}</span></h4>
                <p>{p.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      <ReassureCard />
    </aside>
  );
}

/* ---------------- FOOTER ---------------- */
function FooterCT() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <img src="assets/logo-white.png" alt="Bacatá Dynamics" />
            <p>Capacidad técnica bajo demanda. Un equipo de ingeniería, IA y datos ejecutando su backlog, mes a mes.</p>
          </div>
          <div><h5>Producto</h5><ul><li><a href={COMO_CT}>Cómo funciona</a></li><li><a href={HOME_CT + "#capacidad"}>Capacidad</a></li><li><a href={PLANES_CT}>Planes</a></li><li><a href={HOME_CT + "#comparativa"}>Comparativa</a></li></ul></div>
          <div><h5>Servicios</h5><ul><li><a href={HOME_CT}>Software a medida</a></li><li><a href={HOME_CT}>Automatización</a></li><li><a href={HOME_CT}>Inteligencia artificial</a></li><li><a href={HOME_CT}>Analítica & BI</a></li></ul></div>
          <div><h5>Empresa</h5><ul><li><a href="Quiénes somos.html">¿Quiénes somos nosotros?</a></li><li><a href="Política de privacidad.html">Política de privacidad</a></li><li><a href={HOME_CT}>Inicio</a></li><li><a href="Solicitar diagnóstico.html">Contacto</a></li><li><a href={HOME_CT}>Casos</a></li><li><a href={HOME_CT}>Carreras</a></li></ul></div>
        </div>
        <div className="footer-bot">
          <span>© 2026 Bacatá Dynamics. Todos los derechos reservados.</span>
          <span>Bogotá · Remoto LATAM</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------------- APP ---------------- */
function ContactApp() {
  useReveal(0);
  return (
    <React.Fragment>
      <NavCT />
      <main className="ct-page">
        <HeroCT />
        <section className="ct-main">
          <div className="wrap ct-grid">
            <DiagForm />
            <AsideCT />
          </div>
        </section>
      </main>
      <FooterCT />
    </React.Fragment>
  );
}

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