/* Secciones de la landing */

function Nav() {
  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="#top">
          <img src="assets/logo-dark.png" alt="Bacatá Dynamics" />
          <b>Bacatá Dynamics</b>
        </a>
        <div className="nav-cta">
          <LangToggle />
          <a className="btn btn-ghost" href="Iniciar sesión.html">Iniciar sesión</a>
          <a className="btn btn-primary" href="Solicitar diagnóstico.html">Solicitar diagnóstico</a>
        </div>
      </div>
    </header>
  );
}

function Hero({ layout, anim, kanbanSpeed }) {
  return (
    <section className="hero" id="top" data-layout={layout} data-screen-label="Hero">
      <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">Consultoría tecnológica por suscripción</span>
          <h1 className="reveal in d1">
            Usted tiene problemas, <span className="flow">nosotros soluciones</span>.
          </h1>
          <p className="hero-sub reveal in d2">
            Su próximo proyecto no necesita más reuniones, más contrataciones ni más proveedores.<br/><br/>
            Necesita ejecutarse.<br/><b>Necesita Bacatá Dynamics.</b>
          </p>
          <div className="hero-actions reveal in d3">
            <a className="btn btn-primary btn-lg" href="Solicitar diagnóstico.html">Solicitar diagnóstico <Icon.arrow /></a>
            <a className="btn btn-ghost btn-lg" href="Cómo funciona.html"><span className="play-dot"><Icon.play /></span> Ver cómo funciona</a>
          </div>
          <div className="hero-trust reveal in d4">
            <div className="dots"><span>SAP</span><span>IA</span><span>AWS</span><span>BI</span></div>
            <small><b>+100 iniciativas</b> entregadas para equipos de<br/>finanzas, operaciones y tecnología.</small>
          </div>
        </div>
        <div className="hero-stage reveal in d2">
          <IniciativasStage speed={kanbanSpeed} anim={anim} />
        </div>
      </div>
    </section>
  );
}

const TECHS = ["AWS", "Google Cloud", "Snowflake", "Python", "Vertex AI", "PostgreSQL", "Docker", "Kubernetes"];
function TechStrip() {
  const row = [...TECHS, ...TECHS];
  return (
    <section className="tech" id="stack">
      <div className="wrap">
        <p className="tech-label reveal">Construimos sobre el stack que su empresa ya confía</p>
      </div>
      <div className="marquee reveal">
        <div className="marquee-track">
          {row.map((t, i) => (
            <span className="tech-item" key={i}><span className="tech-glyph"><Icon.chip /></span>{t}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

const STEPS = [
  { n: "01", ico: <Icon.list />, t: "Priorice iniciativas", d: "Agregue ideas al backlog. Usted decide qué importa primero y nosotros lo convertimos en tareas ejecutables." },
  { n: "02", ico: <Icon.team />, t: "Nosotros ejecutamos", d: "Asignamos especialistas según necesidad — ingeniería, IA, datos o automatización — sin contrataciones." },
  { n: "03", ico: <Icon.ship />, t: "Reciba resultados", d: "Entregas continuas todos los meses. Avance visible en el Kanban, en producción y medible." },
];
function Steps() {
  return (
    <section className="section" id="capacidad">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="kicker">El modelo</span>
          <h2>No contrata proyectos.<br/>Contrata capacidad.</h2>
        </div>
        <div className="steps">
          {STEPS.map((s, i) => (
            <article className={"step reveal d" + (i + 1)} key={s.n}>
              <FlowWave variant="glyph" className="wave-deco" />
              <div className="step-num">{s.n}</div>
              <div className="step-ico">{s.ico}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

const METRICS = [
  { pre: "+", to: 100, suf: "", lbl: "iniciativas entregadas" },
  { to: 95, suf: "%", lbl: "de satisfacción de clientes" },
  { to: 48, suf: "h", lbl: "tiempo promedio de inicio" },
  { text: "3–12", suf: "", lbl: "meses · contratos típicos" },
];
function Metrics({ anim }) {
  return (
    <section className="section bg-ink on-dark" id="resultados" data-screen-label="Métricas">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="kicker on-dark">Resultados</span>
          <h2>Capacidad que se mide<br/>en entregas, no en horas.</h2>
        </div>
        <div className="metrics-grid">
          {METRICS.map((m, i) => (
            <div className={"metric reveal d" + (i + 1)} key={i}>
              <div className="num">
                {m.text
                  ? <span>{m.text}</span>
                  : <CountUp to={m.to} prefix={m.pre || ""} anim={anim} />}
                {m.suf && <span className="u">{m.suf}</span>}
              </div>
              <div className="lbl">{m.lbl}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const CMP_ROWS = [
  { f: "Tiempo de inicio", trad: "Semanas de scoping, propuestas y contratos", us: "Operando en 48 horas" },
  { f: "Flexibilidad", trad: "Alcance fijo; cada cambio renegocia el contrato", us: "Reprioriza tu backlog cuando quieras" },
  { f: "Costo", trad: "Proyectos cerrados de alto ticket", us: "Suscripción mensual predecible" },
  { f: "Identificación de valor", trad: "Ejecuta lo solicitado sin evaluar qué iniciativas rinden más", us: "Con el plan anual, una auditoría prioriza los proyectos de mayor retorno" },
  { f: "Modelo de cobro", trad: "Comisiona un porcentaje sobre la rentabilidad que generan los entregables", us: "Tarifa mensual fija: nunca cobramos un % de tu rentabilidad" },
  { f: "Visibilidad de resultados", trad: "Informes estáticos en PDF al cierre del proyecto", us: "Portal del cliente con histórico de proyectos, rentabilidad generada y tiempo ahorrado, en vivo" },
  { f: "Continuidad", trad: "El equipo se disuelve al cerrar el proyecto", us: "Equipo dedicado, mes a mes" },
  { f: "Transferencia de conocimiento", trad: "Se va con el proveedor", us: "Documentación y handover continuo" },
];
function Comparison() {
  return (
    <section className="section bg-wash" id="comparativa">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="kicker">Por qué Bacatá</span>
          <h2>Consultoría tradicional vs. Bacatá Dynamics</h2>
        </div>
        <div className="cmp reveal">
          <div className="cmp-colhead head-feat">Criterio</div>
          <div className="cmp-colhead head-trad">Consultoría tradicional</div>
          <div className="cmp-colhead head-us cmp-col-us"><img src="assets/logo-blue.png" style={{height:"22px"}} alt=""/> Bacatá Dynamics</div>
          {CMP_ROWS.map((r, i) => (
            <React.Fragment key={i}>
              <div className="cmp-cell cmp-feat">{r.f}</div>
              <div className="cmp-cell cmp-trad"><Icon.x className="cmp-ico no" /><span className="ct">{r.trad}</span></div>
              <div className="cmp-cell cmp-us cmp-col-us"><Icon.check className="cmp-ico yes" /><span className="ct">{r.us}</span></div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  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>Una suscripción. Capacidad técnica continua. Resultados medibles.</h2>
        <p>Acceda a un equipo completo de ingeniería, datos, automatización e inteligencia artificial sin construirlo internamente.</p>
        <div className="hero-actions">
          <a className="btn btn-primary btn-lg" href="Solicitar diagnóstico.html">Solicitar diagnóstico <Icon.arrow /></a>
          <a className="btn btn-light btn-lg" href="Cómo funciona.html">Ver cómo funciona</a>
        </div>
      </div>
      <FlowWave variant="divider" className="wave-deco flow-divider" style={{ color: "#191A1C" }} />
    </section>
  );
}

function Footer() {
  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">Cómo funciona</a></li><li><a href="#capacidad">Capacidad</a></li><li><a href="#stack">Stack</a></li><li><a href="#comparativa">Comparativa</a></li></ul></div>
          <div><h5>Servicios</h5><ul><li><a href="#">Software a medida</a></li><li><a href="#">Automatización</a></li><li><a href="#">Inteligencia artificial</a></li><li><a href="#">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="#contacto">Contacto</a></li><li><a href="#">Casos</a></li><li><a href="#">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>
  );
}

Object.assign(window, { Nav, Hero, TechStrip, Steps, Metrics, Comparison, FinalCTA, Footer });