/* Ver planes disponibles — visualizaciones interactivas + cierre */

/* ---------------- SLIDER de capacidad ---------------- */
const CS_LEVELS = ["Starter", "Pro", "Partner"];
const CS_METRICS = [
  { lbl: "Iniciativas activas", lv: [{ h: 14, n: "1" }, { h: 43, n: "3" }, { h: 100, n: "7" }] },
  { lbl: "Especialización disponible", lv: [{ h: 32, n: "Básica" }, { h: 68, n: "Prioritaria" }, { h: 100, n: "Ampliada" }] },
  { lbl: "Capacidad organizacional", lv: [{ h: 30, n: "Focalizada" }, { h: 66, n: "Multiárea" }, { h: 100, n: "Integral" }] },
  { lbl: "Velocidad de ejecución", lv: [{ h: 36, n: "Constante" }, { h: 72, n: "Alta" }, { h: 100, n: "Máxima" }] },
  { lbl: "Cobertura tecnológica", lv: [{ h: 34, n: "Esencial" }, { h: 70, n: "Amplia" }, { h: 100, n: "Completa" }] },
];
const CS_DESC = [
  "Una iniciativa estratégica avanzando de forma continua.",
  "Entre 2 y 4 iniciativas ejecutándose en paralelo, con priorización constante.",
  "Un roadmap corporativo completo con múltiples iniciativas interconectadas.",
];

function CapSlider() {
  const [lv, setLv] = useState(0);
  const pct = (lv / (CS_LEVELS.length - 1)) * 100;
  return (
    <section className="section" id="crecimiento">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="kicker">Capacidad escalable</span>
          <h2>Su capacidad crece con sus objetivos.</h2>
          <p>Desplácese entre niveles y observe cómo aumenta la capacidad de ejecución de su organización.</p>
        </div>

        <div className="capslider reveal">
          <div className="cs-top">
            <div className="cs-tabs">
              {CS_LEVELS.map((l, i) => (
                <button className={"cs-tab" + (i === lv ? " active" : "")} key={l} onClick={() => setLv(i)}>{l}</button>
              ))}
            </div>
            <div className="cs-level"><b>{CS_LEVELS[lv]}</b> — {CS_DESC[lv]}</div>
          </div>

          <div className="cs-track-wrap">
            <input type="range" min="0" max="2" step="1" value={lv}
              onChange={(e) => setLv(parseInt(e.target.value, 10))}
              style={{ position: "absolute", opacity: 0, width: "calc(100% - 80px)", height: "32px", cursor: "pointer", zIndex: 4 }} />
            <div className="cs-track">
              <div className="cs-fill" style={{ width: pct + "%" }}></div>
              <div className="cs-knob" style={{ left: pct + "%" }}></div>
            </div>
            <div className="cs-stops">
              {CS_LEVELS.map((l, i) => (
                <button className={"cs-stop" + (i === lv ? " on" : "")} key={l} onClick={() => setLv(i)}>{l}</button>
              ))}
            </div>
          </div>

          <div className="cs-bars">
            {CS_METRICS.map((m) => (
              <div className="cs-bar" key={m.lbl}>
                <div className="csb-lbl">{m.lbl}</div>
                <div className="csb-track"><div className="csb-val" style={{ height: m.lv[lv].h + "%" }}></div></div>
                <div className="csb-num">{m.lv[lv].n}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- COMPARADOR de capacidades ---------------- */
const CT_ROWS = [
  { c: "Iniciativas activas", v: ["1 iniciativa estratégica", "3 simultáneas", "7 simultáneas"] },
  { c: "Consultoría tecnológica", v: ["Incluida", "Ampliada", "Estratégica continua"] },
  { c: "Especialistas", v: ["Bajo demanda", "Prioritarios", "Acceso ampliado"] },
  { c: "Tiempo de respuesta", v: ["48 horas", "24 horas", "2 h · incidentes críticos"] },
  { c: "Escalabilidad", v: ["Moderada", "Alta", "Estratégica"] },
  { c: "Gobierno tecnológico", v: ["Esencial", "Avanzado", "Corporativo"] },
  { c: "Planeación tecnológica", v: ["Por iniciativa", "Multiiniciativa", "Roadmap organizacional"] },
];

function Comparador() {
  return (
    <section className="section bg-wash" id="comparar">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="kicker">Comparador</span>
          <h2>Compare niveles de capacidad.</h2>
        </div>
        <div className="captbl reveal">
          <div className="ct-head crit">Capacidad</div>
          <div className="ct-head plan"><div className="cth-n">STARTER</div><div className="cth-s">Una iniciativa</div></div>
          <div className="ct-head plan feat"><div className="cth-n">PRO</div><div className="cth-s">Múltiples prioridades</div></div>
          <div className="ct-head plan"><div className="cth-n">PARTNER</div><div className="cth-s">Transformación</div></div>
          {CT_ROWS.map((r) => (
            <React.Fragment key={r.c}>
              <div className="ct-cell crit">{r.c}</div>
              <div className="ct-cell val">{r.v[0]}</div>
              <div className="ct-cell val feat">{r.v[1]}</div>
              <div className="ct-cell val">{r.v[2]}</div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- CALCULADORA ejecutiva ---------------- */
const clamp = (v, a, b) => Math.max(a, Math.min(b, v));

function Calculadora() {
  const [ini, setIni] = useState(3);
  const [tiempo, setTiempo] = useState(1); // 0 flexible · 1 trimestre · 2 inmediato
  const [compl, setCompl] = useState(1);   // 0 baja · 1 media · 2 alta
  const [espec, setEspec] = useState(1);   // 0 puntual · 1 variada · 2 amplia

  const urgency = tiempo; // mayor urgencia agrava al equipo interno

  const wInit = Math.round(6 + ini * 1.2 + compl * 3 + espec * 2 + urgency * 1.5);
  const mDeliv = (2.4 + ini * 0.35 + compl * 1.1 + espec * 0.5).toFixed(1);
  const wBacDeliv = Math.round(2 + compl * 0.6);
  const coordInt = clamp(24 + ini * 8 + espec * 10 + compl * 6, 0, 100);
  const capInt = clamp(82 - ini * 7 - compl * 5 - espec * 3, 12, 82);
  const flexInt = clamp(40 - compl * 6 - ini * 2.5 - urgency * 4, 8, 42);

  const word = (v, lo, mid, hi) => (v < 38 ? lo : v < 70 ? mid : hi);

  const M = [
    { lbl: "Tiempo para iniciar",
      iTxt: "~" + wInit + " semanas", iBar: clamp(wInit / 26 * 100, 14, 100),
      bTxt: "48 horas", bBar: 7 },
    { lbl: "Tiempo hasta primera entrega",
      iTxt: "~" + mDeliv + " meses", iBar: clamp(parseFloat(mDeliv) / 7 * 100, 16, 100),
      bTxt: "~" + wBacDeliv + " semanas", bBar: clamp(wBacDeliv / 12 * 100, 10, 40) },
    { lbl: "Esfuerzo de coordinación",
      iTxt: word(coordInt, "Moderado", "Alto", "Muy alto"), iBar: coordInt,
      bTxt: "1 punto de contacto", bBar: 12 },
    { lbl: "Capacidad disponible",
      iTxt: word(capInt, "Limitada", "Ajustada", "Suficiente"), iBar: capInt,
      bTxt: "Equipo bajo demanda", bBar: clamp(72 + ini * 3, 72, 100) },
    { lbl: "Flexibilidad de escalamiento",
      iTxt: word(flexInt, "Rígida", "Limitada", "Moderada"), iBar: flexInt,
      bTxt: "Escalado inmediato", bBar: clamp(84 + ini * 2, 84, 100) },
  ];

  const Seg = ({ value, set, opts }) => (
    <div className="calc-seg">
      {opts.map((o, i) => (
        <button key={o} className={i === value ? "on" : ""} onClick={() => set(i)}>{o}</button>
      ))}
    </div>
  );

  return (
    <section className="section bg-ink on-dark" id="calculadora" data-screen-label="Calculadora">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="kicker on-dark">Calculadora ejecutiva</span>
          <h2>Construir internamente vs.<br/>acelerar con Bacatá Dynamics.</h2>
          <p>Ajuste las variables de su contexto y compare ambos caminos.</p>
        </div>

        <div className="calc reveal">
          <div className="calc-inputs">
            <div className="calc-field">
              <div className="cf-top"><span className="cf-lbl">Número de iniciativas</span><span className="cf-val">{ini}</span></div>
              <input className="calc-range" type="range" min="1" max="8" step="1" value={ini} onChange={(e) => setIni(parseInt(e.target.value, 10))} />
            </div>
            <div className="calc-field">
              <div className="cf-top"><span className="cf-lbl">Tiempo objetivo</span></div>
              <Seg value={tiempo} set={setTiempo} opts={["Flexible", "Trimestre", "Inmediato"]} />
            </div>
            <div className="calc-field">
              <div className="cf-top"><span className="cf-lbl">Complejidad tecnológica</span></div>
              <Seg value={compl} set={setCompl} opts={["Baja", "Media", "Alta"]} />
            </div>
            <div className="calc-field">
              <div className="cf-top"><span className="cf-lbl">Necesidad de especialización</span></div>
              <Seg value={espec} set={setEspec} opts={["Puntual", "Variada", "Amplia"]} />
            </div>
          </div>

          <div className="calc-out">
            <div className="calc-cols">
              <div className="calc-card internal">
                <div className="cc-name">Equipo interno</div>
                {M.map((m) => (
                  <div className="calc-metric" key={m.lbl}>
                    <div className="cm-lbl">{m.lbl}</div>
                    <div className="cm-val">{m.iTxt}</div>
                    <div className="cm-bar"><i style={{ width: m.iBar + "%" }}></i></div>
                  </div>
                ))}
              </div>
              <div className="calc-card bacata">
                <div className="cc-name">Bacatá Dynamics</div>
                {M.map((m) => (
                  <div className="calc-metric" key={m.lbl}>
                    <div className="cm-lbl">{m.lbl}</div>
                    <div className="cm-val">{m.bTxt}</div>
                    <div className="cm-bar"><i style={{ width: m.bBar + "%" }}></i></div>
                  </div>
                ))}
              </div>
            </div>
            <div className="calc-foot">
              <div className="cfo-ico"><Icon.clock /></div>
              <p>Con Bacatá Dynamics empieza en <b>48 horas</b> en lugar de <b>~{wInit} semanas</b>, sin asumir el riesgo de construir, contratar y coordinar un equipo interno completo.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- GARANTÍAS ---------------- */
const GUARS = [
  { ico: <Icon.shield />, t: "Continuidad", d: "Equipos estables y conocimiento acumulado que permanece dentro de su organización." },
  { ico: <Icon.eye />, t: "Transparencia", d: "Visibilidad permanente sobre prioridades, avance y resultados, en todo momento." },
  { ico: <Icon.scale />, t: "Escalabilidad", d: "Capacidad adicional disponible exactamente cuando el negocio la necesita." },
];

function Garantias() {
  return (
    <section className="section" id="garantias">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="kicker">Garantías</span>
          <h2>Construido para relaciones<br/>de largo plazo.</h2>
        </div>
        <div className="guars">
          {GUARS.map((g, i) => (
            <article className={"guar reveal d" + (i + 1)} key={g.t}>
              <FlowWave variant="glyph" className="wave-deco" />
              <div className="guar-ico">{g.ico}</div>
              <h3>{g.t}</h3>
              <p>{g.d}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- CTA FINAL ---------------- */
function FinalPL() {
  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" }}>Demos el siguiente paso</span>
        <h2>Encuentre el nivel adecuado de capacidad para sus objetivos.</h2>
        <p>Conversemos sobre sus prioridades y diseñemos una propuesta alineada con las necesidades de su organización.</p>
        <div className="hero-actions">
          <a className="btn btn-primary btn-lg" href="#contacto">Solicitar propuesta personalizada <Icon.arrow /></a>
          <a className="btn btn-light btn-lg" href="#contacto">Agendar conversación</a>
        </div>
      </div>
      <FlowWave variant="divider" className="wave-deco flow-divider" style={{ color: "#191A1C" }} />
    </section>
  );
}

/* ---------------- NOTA LEGAL ---------------- */
function Legal() {
  return (
    <section className="legal">
      <div className="wrap">
        <div className="legal-inner reveal">
          <div className="legal-ico"><Icon.info /></div>
          <div>
            <h4>Qué incluye la suscripción</h4>
            <p>
              Los costos asociados a infraestructura tecnológica, servicios cloud, licenciamiento de software,
              consumo de modelos de inteligencia artificial, almacenamiento de datos, hardware, sensores,
              dispositivos industriales, robots, maquinaria especializada, sistemas de automatización física y
              cualquier componente tecnológico externo requerido para una iniciativa específica no están
              incluidos dentro de la suscripción y se presupuestan por separado según las necesidades de cada proyecto.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- FOOTER ---------------- */
function FooterPL() {
  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>Planes</h5><ul><li><a href="#planes">Starter</a></li><li><a href="#planes">Pro</a></li><li><a href="#planes">Partner</a></li><li><a href="#comparar">Comparador</a></li></ul></div>
          <div><h5>Recursos</h5><ul><li><a href="#calculadora">Calculadora ejecutiva</a></li><li><a href="#crecimiento">Capacidad escalable</a></li><li><a href={COMO_PL}>Cómo funciona</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_PL}>Inicio</a></li><li><a href="#contacto">Contacto</a></li><li><a href="#garantias">Garantías</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 AppPL() {
  useReveal(0);
  return (
    <React.Fragment>
      <NavPL />
      <main>
        <HeroPL />
        <Valor />
        <Planes />
        <CapSlider />
        <Comparador />
        <Calculadora />
        <Garantias />
        <FinalPL />
        <Legal />
      </main>
      <FooterPL />
    </React.Fragment>
  );
}

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