/* Ver planes disponibles — Bacatá Dynamics (misma identidad que Home) */
const { useState, useEffect, useRef } = React;

const HOME_PL = "/";
const COMO_PL = "Cómo funciona.html";
const CONTACTO_PL = "Solicitar diagnóstico.html";

/* ---------------- NAV ---------------- */
function NavPL() {
  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_PL}>
          <img src="assets/logo-dark.png" alt="Bacatá Dynamics" />
          <b>Bacatá Dynamics</b>
        </a>
        <div className="nav-cta">
          <LangToggle />
          <a className="nav-back" href={COMO_PL}><Icon.arrow /> Cómo funciona</a>
          <a className="btn btn-primary" href={CONTACTO_PL}>Solicitar propuesta</a>
        </div>
      </div>
    </header>
  );
}

/* ---------------- HERO: convergencia ---------------- */
const CONV_IN = ["Automatización", "Inteligencia artificial", "Analítica", "Integraciones", "Software"];
const CONV_OUT = ["Resultados", "Procesos", "Dashboards", "Aplicaciones", "Decisiones"];

function Convergencia() {
  const [lit, setLit] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setLit((l) => (l + 1) % 5), 900);
    return () => clearInterval(t);
  }, []);
  // geometría aproximada para los conectores SVG (viewBox 0..100 x 0..100)
  const inY = [16, 33, 50, 67, 84];
  const outY = [16, 33, 50, 67, 84];
  return (
    <div className="conv">
      <svg className="conv-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
        {inY.map((y, i) => (
          <path key={"i" + i} className={"in" + (i === lit ? " flow" : "")} d={`M14 ${y} C 32 ${y}, 38 50, 50 50`} />
        ))}
        {outY.map((y, i) => (
          <path key={"o" + i} className={"out" + (i === lit ? " flow out" : "")} d={`M50 50 C 62 50, 68 ${y}, 86 ${y}`} />
        ))}
      </svg>

      <div className="conv-col in">
        {CONV_IN.map((c, i) => (
          <div className={"conv-chip" + (i === lit ? " lit" : "")} key={c}><span className="cc-dot"></span>{c}</div>
        ))}
      </div>

      <div className="conv-core">
        <div className="core-disc">
          <div className="core-ring"></div>
          <img src="assets/logo-blue.png" alt="Bacatá Dynamics" />
        </div>
        <div className="core-lbl">Bacatá<br/>Dynamics</div>
      </div>

      <div className="conv-col out">
        {CONV_OUT.map((c, i) => (
          <div className={"conv-chip" + (i === lit ? " lit" : "")} key={c}><span className="cc-dot"></span>{c}</div>
        ))}
      </div>
    </div>
  );
}

function HeroPL() {
  return (
    <section className="hero pl-hero" id="top" data-screen-label="Hero — Planes">
      <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">Planes de capacidad</span>
          <h1 className="reveal in d1">Capacidad tecnológica para ejecutar <span className="flow">lo que su organización necesita.</span></h1>
          <p className="hero-sub reveal in d2">
            Desde una iniciativa puntual hasta programas completos de transformación, escale su
            capacidad de ejecución sin aumentar la complejidad operativa.
          </p>
          <div className="hero-actions reveal in d3">
            <a className="btn btn-primary btn-lg" href={CONTACTO_PL}>Solicitar propuesta personalizada <Icon.arrow /></a>
            <a className="btn btn-ghost btn-lg" href="#planes">Comparar planes</a>
          </div>
        </div>
        <div className="hero-stage reveal in d2"><Convergencia /></div>
      </div>
    </section>
  );
}

/* ---------------- VALOR (3 métricas) ---------------- */
const VALUE = [
  { ico: <Icon.team />, num: "−1", u: "depto.", lbl: "Menos contratación", d: "Acceda a un equipo multidisciplinario completo sin sumar nómina, procesos de selección ni estructura interna." },
  { ico: <Icon.connect />, num: "-1", u: "punto", lbl: "Menos coordinación", d: "Una sola relación, una sola fuente de prioridades. Nosotros coordinamos especialistas, entregas y seguimiento." },
  { ico: <Icon.rocket />, num: "+3", u: "x", lbl: "Más ejecución", d: "Capacidad técnica lista para avanzar desde el primer día, enfocada en convertir prioridades en resultados." },
];

function Valor() {
  return (
    <section className="section" id="valor">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="kicker">El valor</span>
          <h2>No necesita contratar un departamento<br/>completo para avanzar.</h2>
          <p>Obtenga la capacidad técnica que necesita, cuando la necesita.</p>
        </div>
        <div className="valuemx">
          {VALUE.map((v, i) => (
            <article className={"vmx reveal d" + (i + 1)} key={v.lbl}>
              <FlowWave variant="glyph" className="wave-deco" />
              <div className="vmx-ico">{v.ico}</div>
              <div className="vmx-num">{v.num}<span className="u">{v.u}</span></div>
              <div className="vmx-lbl">{v.lbl}</div>
              <p className="vmx-d">{v.d}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- PLANES (3 tarjetas) ---------------- */
const PLANS = [
  {
    name: "Starter", featured: false,
    tag: "Para organizaciones que necesitan acelerar una iniciativa importante.",
    viz: "single",
    price: "Desde", val: "USD 4.900", per: "/ mes",
    feats: [
      "1 iniciativa estratégica activa",
      "Consultoría técnica incluida",
      "Entregas continuas",
      "Seguimiento permanente",
      "Escalabilidad hacia niveles superiores",
    ],
    examples: ["Portal de clientes", "Automatización de procesos", "Dashboard ejecutivo", "Integración entre sistemas"],
    ideal: "Startups, PyMEs y organizaciones que buscan resultados rápidos con una iniciativa claramente definida.",
    cta: "Solicitar propuesta", ctaClass: "btn-ghost",
  },
  {
    name: "Pro", featured: true, badge: "Más elegido",
    tag: "Para empresas que ejecutan múltiples prioridades simultáneamente.",
    viz: "parallel",
    price: "Desde", val: "USD 12.900", per: "/ mes",
    feats: [
      "3 iniciativas activas simultáneamente",
      "Priorización continua",
      "Mayor velocidad de ejecución",
      "Acceso prioritario a especialistas",
      "Mayor capacidad de crecimiento",
    ],
    examples: ["ERP + Analítica", "CRM + Automatización", "Integraciones + Experiencia Digital", "Operaciones + IA"],
    ideal: "Empresas en crecimiento que necesitan avanzar varias iniciativas sin aumentar estructura interna.",
    cta: "Solicitar propuesta", ctaClass: "btn-light",
  },
  {
    name: "Partner", featured: false,
    tag: "Capacidad estratégica para organizaciones en transformación.",
    viz: "roadmap",
    price: "Desde", val: "A medida", per: "",
    feats: [
      "7 iniciativas activas simultáneamente",
      "Programas de transformación empresarial",
      "Liderazgo técnico continuo",
      "Arquitectura y gobierno tecnológico",
      "Planeación estratégica de largo plazo",
    ],
    examples: ["Transformación digital corporativa", "Programa empresarial de IA", "Modernización tecnológica integral", "Ecosistema digital multiárea"],
    ideal: "Empresas medianas y grandes que buscan acelerar múltiples objetivos estratégicos de negocio.",
    cta: "Solicitar propuesta", ctaClass: "btn-ghost",
  },
];

function PlanViz({ kind }) {
  if (kind === "single") {
    return <div className="plan-viz"><div className="pv-lane"><i></i></div></div>;
  }
  if (kind === "parallel") {
    return (
      <div className="plan-viz" style={{ flexDirection: "column", alignItems: "stretch", gap: "9px" }}>
        {[0, 1, 2].map((n) => (
          <div className="pv-lane" key={n}><i style={{ animationDelay: n * 0.5 + "s" }}></i></div>
        ))}
      </div>
    );
  }
  // roadmap
  return (
    <div className="plan-viz roadmap">
      {[0, 1, 2, 3, 4].map((n) => (
        <div className="pv-lane" key={n}><i style={{ animationDelay: n * 0.32 + "s" }}></i></div>
      ))}
    </div>
  );
}

function PlanCard({ p, idx }) {
  const [open, setOpen] = useState(false);
  return (
    <article className={"plan reveal d" + (idx + 1) + (p.featured ? " featured" : "")}>
      {p.badge && <span className="plan-badge">{p.badge}</span>}
      <div className="plan-name">{p.name}</div>
      <div className="plan-tag">{p.tag}</div>
      <PlanViz kind={p.viz} />
      <div className="plan-divider"></div>
      <ul className="plan-feats">
        {p.feats.map((f) => (
          <li key={f}><Icon.check className="pf-check" />{f}</li>
        ))}
      </ul>

      <div className={"plan-more" + (open ? " open" : "")}>
        <div className="plan-more-inner">
          <div className="plan-block-h">Ejemplos</div>
          <div className="plan-chips">
            {p.examples.map((e) => <span className="plan-chip" key={e}>{e}</span>)}
          </div>
          <div className="plan-block-h" style={{ marginTop: "22px" }}>Ideal para</div>
          <p className="plan-ideal" style={{ marginTop: 0 }}>{p.ideal}</p>
        </div>
      </div>

      <div>
        <button className={"plan-toggle" + (open ? " open" : "")} onClick={() => setOpen((o) => !o)}>
          {open ? "Ver menos" : "Ver capacidad completa"} <Icon.chev />
        </button>
      </div>

      <a className={"btn " + p.ctaClass} href={CONTACTO_PL}>{p.cta} <Icon.arrow /></a>
    </article>
  );
}

function Planes() {
  return (
    <section className="section bg-wash" id="planes" data-screen-label="Planes">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="kicker">Planes</span>
          <h2>Un nivel de capacidad para cada<br/>etapa de crecimiento.</h2>
          <p>Seleccione el nivel de ejecución que mejor se adapte a sus objetivos.</p>
        </div>
        <div className="plans">
          {PLANS.map((p, i) => <PlanCard key={p.name} p={p} idx={i} />)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { NavPL, HeroPL, Valor, Planes });