/* Cómo funciona — componentes (misma identidad que Home) */
const { useState, useEffect, useRef } = React;

const HOME = "/";
const PLANES = "Ver planes disponibles.html";
const CONTACTO = "Solicitar diagnóstico.html";

function NavCF() {
  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}>
          <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}><Icon.arrow /> Volver al inicio</a>
          <a className="btn btn-primary" href={CONTACTO}>Solicitar diagnóstico</a>
        </div>
      </div>
    </header>
  );
}

const PIPE = [
  { ico: <Icon.spark />, t: "Ideas", s: "Lo que su empresa necesita" },
  { ico: <Icon.board />, t: "Prioridades", s: "Ordenadas por impacto" },
  { ico: <Icon.code />, t: "Desarrollo", s: "Ejecución dedicada" },
  { ico: <Icon.rocket />, t: "Entrega", s: "Validada y documentada" },
  { ico: <Icon.check />, t: "Resultados", s: "Impacto medible" },
];

function FlowPipe() {
  const [lit, setLit] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setLit((l) => (l + 1) % PIPE.length), 1400);
    return () => clearInterval(t);
  }, []);
  return (
    <div className="flowpipe">
      {PIPE.map((n, i) => (
        <React.Fragment key={n.t}>
          <div className={"flownode" + (i === lit ? " lit" : "")}>
            <span className="fn-ico">{n.ico}</span>
            <span className="fn-tx"><b>{n.t}</b><span>{n.s}</span></span>
          </div>
          {i < PIPE.length - 1 && <div className="flowseg"><i></i></div>}
        </React.Fragment>
      ))}
    </div>
  );
}

function HeroCF() {
  const scrollTo = (id) => (e) => { e.preventDefault(); document.querySelector(id)?.scrollIntoView({ behavior: "smooth", block: "start" }); };
  return (
    <section className="hero cf-hero" id="top" data-screen-label="Hero — Cómo funciona">
      <div className="hero-bg"></div>
      <div className="hero-grid-overlay"></div>
      <div className="wrap hero-inner">
        <div className="hero-copy">
          <span className="kicker reveal in">Cómo funciona</span>
          <h1 className="reveal in d1">Una forma más simple de ejecutar tecnología.</h1>
          <p className="hero-sub reveal in d2">Usted prioriza. Nosotros diseñamos, desarrollamos, validamos y entregamos.</p>
          <p className="cf-support reveal in d3">Software, automatización, inteligencia artificial y analítica ejecutados mediante un modelo de capacidad técnica bajo demanda.</p>
          <div className="hero-actions reveal in d4">
            <a className="btn btn-primary btn-lg" href={PLANES}>Ver planes disponibles <Icon.arrow /></a>
          </div>
        </div>
        <div className="hero-stage reveal in d2"><FlowPipe /></div>
      </div>
    </section>
  );
}

const STAGES = [
  { ico: <Icon.radar />, t: "Diagnóstico", d: "Comprendemos objetivos, restricciones y oportunidades para construir una hoja de ruta clara." },
  { ico: <Icon.connect />, t: "Onboarding", d: "Preparamos el entorno de trabajo y alineamos prioridades, responsables y contexto." },
  { ico: <Icon.board />, t: "Priorización", d: "Convertimos necesidades en iniciativas concretas enfocadas en impacto." },
  { ico: <Icon.code />, t: "Ejecución", d: "Un equipo multidisciplinario desarrolla, valida y documenta cada entrega." },
  { ico: <Icon.rocket />, t: "Entrega continua", d: "Liberaciones frecuentes con seguimiento, mejora continua y soporte." },
];

function Timeline() {
  const [active, setActive] = useState(0);
  const fill = (active / (STAGES.length - 1)) * 100;
  return (
    <section className="section" id="proceso">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="kicker">El proceso</span>
          <h2>Un proceso diseñado para avanzar sin fricción.</h2>
          <p>Un modelo operativo claro desde el primer día.</p>
        </div>
        <div className="tl reveal">
          <div className="tl-track"><div className="tl-fill" style={{ width: fill + "%" }}></div></div>
          <div className="tl-row">
            {STAGES.map((s, i) => (
              <div
                key={s.t}
                className={"tl-stage" + (i === active ? " active" : "")}
                onMouseEnter={() => setActive(i)}
                onFocus={() => setActive(i)}
                tabIndex={0}
              >
                <div className="tl-dot">{s.ico}</div>
                <div className="tl-step">Paso {i + 1}</div>
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

const FLOW = [
  { ico: <Icon.team />, k: "01", t: "Cliente", d: "Define prioridades." },
  { ico: <Icon.board />, k: "02", t: "Backlog priorizado", d: "Organiza iniciativas." },
  { ico: <Icon.code />, k: "03", t: "Equipo Bacatá Dynamics", d: "Ejecuta y valida." },
  { ico: <Icon.rocket />, k: "04", t: "Resultados", d: "Genera impacto." },
];

function FlowCentral() {
  return (
    <section className="section bg-ink on-dark" id="flujo" data-screen-label="Flujo central">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="kicker on-dark">El modelo en movimiento</span>
          <h2>De la prioridad al resultado, sin fricción.</h2>
        </div>
        <div className="flowmap reveal">
          <div className="fm-rail">
            {[0, 0.68, 1.36, 2.04, 2.72].map((d, i) => (
              <span className="p" key={i} style={{ animationDelay: d + "s" }}></span>
            ))}
          </div>
          <div className="fm-grid">
            {FLOW.map((b) => (
              <div className="fm-col" key={b.k}>
                <div className="fm-node">{b.ico}</div>
                <div className="fm-tx">
                  <div className="fm-k">{b.k}</div>
                  <h3>{b.t}</h3>
                  <p>{b.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

const PRINCIPLES = [
  { ico: <Icon.spark />, t: "Claridad", d: "Una única fuente de prioridades y seguimiento." },
  { ico: <Icon.rocket />, t: "Velocidad", d: "Capacidad técnica lista para ejecutar." },
  { ico: <Icon.check />, t: "Continuidad", d: "Entregas constantes sin necesidad de ampliar estructura interna." },
  { ico: <Icon.radar />, t: "Auditoría de valor", d: "Con la contratación anual, auditamos el área donde se implementará el proyecto para identificar las iniciativas de mayor rentabilidad." },
  { ico: <Icon.board />, t: "Sin comisión por rentabilidad", d: "Tarifa mensual fija: nunca cobramos un porcentaje de la rentabilidad que generan los proyectos entregados." },
];

function Principios() {
  return (
    <section className="section bg-wash" id="principios">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="kicker">Principios</span>
          <h2>Construido sobre certezas claras.</h2>
        </div>
        <div className="principles">
          {PRINCIPLES.map((p, i) => (
            <article className={"principle reveal d" + (i + 1)} key={p.t}>
              <FlowWave variant="glyph" className="wave-deco" />
              <div className="pr-ico">{p.ico}</div>
              <h3>{p.t}</h3>
              <p>{p.d}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCF() {
  return (
    <section className="final" id="contacto" data-screen-label="CTA final">
      <FlowWave variant="line" style={{ position: "absolute", inset: 0, color: "#fff", opacity: .35, zIndex: 1 }} />
      <div className="wrap final-inner reveal">
        <span className="kicker" style={{ justifyContent: "center", display: "flex" }}>Empiece hoy</span>
        <h2>Menos coordinación.<br/>Más ejecución.</h2>
        <p>Concentre a su equipo en las decisiones importantes. Nosotros nos encargamos de convertir prioridades en resultados.</p>
        <div className="hero-actions">
          <a className="btn btn-primary btn-lg" href={PLANES}>Ver planes disponibles <Icon.arrow /></a>
          <a className="btn btn-light btn-lg" href={CONTACTO}>Agendar una conversación</a>
        </div>
      </div>
      <FlowWave variant="divider" className="wave-deco flow-divider" style={{ color: "#191A1C" }} />
    </section>
  );
}

function FooterCF() {
  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>Cómo funciona</h5><ul><li><a href="#proceso">El proceso</a></li><li><a href="#flujo">El modelo</a></li><li><a href="#principios">Principios</a></li></ul></div>
          <div><h5>Servicios</h5><ul><li><a href={HOME}>Software a medida</a></li><li><a href={HOME}>Automatización</a></li><li><a href={HOME}>Inteligencia artificial</a></li><li><a href={HOME}>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}>Inicio</a></li><li><a href={CONTACTO}>Contacto</a></li><li><a href={HOME + "#comparativa"}>Comparativa</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>
  );
}

function AppCF() {
  useReveal(0);
  return (
    <React.Fragment>
      <NavCF />
      <main>
        <HeroCF />
        <Timeline />
        <FlowCentral />
        <Maquina anim={1} />
        <CapacidadAcumulada anim={1} />
        <Principios />
        <FinalCF />
      </main>
      <FooterCF />
    </React.Fragment>
  );
}

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