/* Máquina de resultados — sección premium (Home) */
/* usa los globals useState/useEffect/useRef (declarados en kanban.jsx) */

/* ---- contador con formato es-CO ---- */
function CountKPI({ to, dec = 0, prefix = "", anim = 1 }) {
  const [v, setV] = useState(0);
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    let done = false;
    const run = () => {
      if (anim <= 0) { setV(to); return; }
      const D = 1800 / Math.max(0.35, anim), t0 = performance.now();
      const tick = (now) => {
        const p = Math.min(1, (now - t0) / D);
        setV(to * (1 - Math.pow(1 - p, 3)));
        if (p < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    };
    const check = () => {
      if (done) return;
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight * 0.9 && r.bottom > 0) { done = true; window.removeEventListener("scroll", check); run(); }
    };
    check();
    window.addEventListener("scroll", check, { passive: true });
    return () => window.removeEventListener("scroll", check);
  }, []);
  const fmt = dec > 0 ? v.toFixed(dec) : Math.round(v).toLocaleString("es-CO");
  return <span ref={ref}>{prefix}{fmt}</span>;
}

/* ---- datos ---- */
const MQ_IDEAS = [
  "Automatizar conciliación financiera",
  "Agente IA para servicio al cliente",
  "Dashboard ejecutivo",
  "Integración SAP",
  "Predicción de demanda",
  "Automatización de compras",
  "Portal de proveedores",
];
const MQ_RESULTS = [
  { ttl: "Automatizar conciliación financiera", b: "320 h", s: "recuperadas al mes" },
  { ttl: "Agente IA Comercial", b: "+18%", s: "velocidad de respuesta" },
  { ttl: "Predicción de demanda", b: "+12%", s: "precisión operacional" },
  { ttl: "Dashboard Ejecutivo", b: "100%", s: "visibilidad de indicadores" },
];
const MQ_CAPS = ["IA", "Software", "Automatización", "Datos", "Cloud"];
const MQ_KPIS = [
  { to: 1240, prefix: "$", u: "M COP", lbl: "Utilidad generada", trend: "▲ este trimestre" },
  { to: 18450, u: "", lbl: "Horas recuperadas", trend: "▲ acumulado" },
  { to: 47, u: "", lbl: "Iniciativas completadas", trend: "" },
  { to: 6, u: "", lbl: "Iniciativas activas", trend: "" },
  { to: 6.4, dec: 1, u: "x", lbl: "ROI estimado", trend: "▲" },
];
const MQ_VALUES = [
  { num: "+37", u: "%", lbl: "Incremento de productividad", d: "Automatización de tareas repetitivas y reducción de trabajo manual." },
  { num: "$850", u: "M COP", lbl: "Ahorro operativo", d: "Costos eliminados mediante automatización y optimización." },
  { num: "4", u: "x", lbl: "Velocidad de ejecución", d: "Más rápido que construir capacidades internas desde cero." },
];
const MKB_COLS = [
  { h: "Backlog", t: "Motor de precios dinámicos" },
  { h: "Diseño", t: "Portal de proveedores" },
  { h: "Construcción", t: "Dashboard financiero" },
  { h: "Validación", t: "Integración SAP" },
  { h: "Producción", t: "Forecast de demanda" },
];

/* ---- núcleo + flujo ---- */
function CoreFlow({ anim }) {
  const [off, setOff] = useState(0);
  useEffect(() => {
    if (anim <= 0) return;
    const t = setInterval(() => setOff((o) => o + 1), 4800 / Math.max(0.4, anim));
    return () => clearInterval(t);
  }, [anim]);
  const ideas = [0, 1, 2].map((i) => MQ_IDEAS[(off + i) % MQ_IDEAS.length]);
  const res = [0, 1, 2].map((i) => MQ_RESULTS[(off + i) % MQ_RESULTS.length]);
  return (
    <div className="mq-flow">
      <div className="mq-lane left">
        {ideas.map((t, i) => (
          <div className="mq-card" key={t + i}>
            <div className="mc-tag">Iniciativa</div>
            <div className="mc-ttl">{t}</div>
          </div>
        ))}
      </div>

      <div className="mq-core">
        <div className="ring r1"></div><div className="ring r2"></div><div className="ring r3"></div>
        <div className="mq-glow"></div>
        <div className="mq-logo"><img src="assets/logo-blue.png" alt="Bacatá Dynamics" /></div>
        <div className="mq-caps">
          {MQ_CAPS.map((c, i) => (
            <div className="mq-cap" key={c}
              style={{ transform: `rotate(${i * 72}deg) translateY(-150px) rotate(${-i * 72}deg)` }}>{c}</div>
          ))}
        </div>
      </div>

      <div className="mq-lane right">
        {res.map((r, i) => (
          <div className="mq-card mq-res" key={r.ttl + i}>
            <div className="mc-tag">Resultado</div>
            <div className="mc-ttl">{r.ttl}</div>
            <div className="mc-metric"><b>{r.b}</b><span>{r.s}</span></div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---- mini kanban ejecutivo (conveyor con fade) ---- */
function MiniKanban({ anim }) {
  const [cols, setCols] = useState({ k0: 0, k1: 1, k2: 2, k3: 3, k4: 4 });
  const recRef = useRef(new Set());
  const nodes = useRef({});
  const rects = useRef({});
  useEffect(() => {  // FLIP
    Object.entries(nodes.current).forEach(([id, n]) => {
      if (!n) return;
      const nr = n.getBoundingClientRect(), prev = rects.current[id];
      if (prev && recRef.current.has(id)) {
        n.style.transition = "none"; n.style.opacity = "0";
        requestAnimationFrame(() => requestAnimationFrame(() => { n.style.transition = ""; n.style.opacity = "1"; }));
      } else if (prev) {
        const dx = prev.left - nr.left, dy = prev.top - nr.top;
        if (Math.abs(dx) > .5 || Math.abs(dy) > .5) {
          n.style.transition = "none"; n.style.transform = `translate(${dx}px,${dy}px)`;
          requestAnimationFrame(() => requestAnimationFrame(() => { n.style.transition = ""; n.style.transform = ""; }));
        }
      }
      rects.current[id] = nr;
    });
    recRef.current.clear();
  }, [cols]);
  useEffect(() => {
    if (anim <= 0) return;
    const interval = Math.max(1700, 3400 / Math.max(0.4, anim));
    const t = setInterval(() => setCols((prev) => {
      const next = {}, rec = new Set();
      for (const id in prev) { const v = (prev[id] + 1) % 5; if (prev[id] === 4) rec.add(id); next[id] = v; }
      recRef.current = rec; return next;
    }), interval);
    return () => clearInterval(t);
  }, [anim]);
  const ids = Object.keys(cols);
  return (
    <div className="mkb">
      <div className="mkb-h">Kanban ejecutivo</div>
      <div className="mkb-grid">
        {MKB_COLS.map((c, ci) => {
          const here = ids.filter((id) => cols[id] === ci);
          return (
            <div className="mkb-col" key={c.h}>
              <div className="mc-h">{c.h}</div>
              <div className="mkb-body">
                {here.map((id) => (
                  <div className="mkb-card" key={id} ref={(n) => { nodes.current[id] = n; }}>{MKB_COLS[+id.slice(1)].t}</div>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function Portal({ anim }) {
  return (
    <div className="portal reveal">
      <div className="portal-bar">
        <span className="dot"></span><span className="dot"></span><span className="dot"></span>
        <span className="pb-ttl">portal.bacatadynamics.com</span>
        <span className="pb-live">En vivo</span>
      </div>
      <div className="portal-body">
        <div className="portal-h">Resumen Ejecutivo</div>
        <div className="portal-sub">Su suscripción, traducida a impacto medible.</div>

        <div className="kpis">
          {MQ_KPIS.map((k) => (
            <div className="kpi" key={k.lbl}>
              <div className="k-num"><CountKPI to={k.to} dec={k.dec || 0} prefix={k.prefix || ""} anim={anim} />{k.u && <span className="u">{k.u}</span>}</div>
              <div className="k-lbl">{k.lbl}</div>
              {k.trend && <div className="k-trend">{k.trend}</div>}
            </div>
          ))}
        </div>

        <div className="portal-grid">
          <div className="chart">
            <div className="c-h"><b>Impacto acumulado</b><span>▲ +42% YTD</span></div>
            <div className="c-tip">+42% YTD</div>
            <svg viewBox="0 0 560 180" preserveAspectRatio="none">
              <defs>
                <linearGradient id="mqArea" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="rgba(103,182,239,.35)" />
                  <stop offset="100%" stopColor="rgba(103,182,239,0)" />
                </linearGradient>
              </defs>
              <path d="M10 158 C 90 150,130 124,200 112 S 330 84,400 58 S 510 30,552 16 L552 180 L10 180 Z" fill="url(#mqArea)" />
              <path className="chartline" d="M10 158 C 90 150,130 124,200 112 S 330 84,400 58 S 510 30,552 16" />
              <circle className="chartdot" cx="552" cy="16" r="5" />
            </svg>
          </div>
          <MiniKanban anim={anim} />
        </div>
      </div>
    </div>
  );
}

function Maquina({ anim = 1 }) {
  return (
    <section className="maquina section" id="maquina" data-screen-label="Máquina de resultados">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="kicker">La suscripción en acción</span>
          <h2>Transforme iniciativas en resultados.</h2>
          <p>Obtenga capacidad técnica bajo demanda para ejecutar software, automatización, inteligencia artificial y analítica mediante una suscripción mensual.</p>
        </div>

        <CoreFlow anim={anim} />

        <div style={{ marginTop: "20px" }} className="reveal">
          <Portal anim={anim} />
        </div>

        <div className="valblocks">
          {MQ_VALUES.map((v, i) => (
            <div className={"valblock reveal d" + (i + 1)} key={v.lbl}>
              <div className="v-num">{v.num}<span className="u">{v.u}</span></div>
              <div className="v-lbl">{v.lbl}</div>
              <div className="v-d">{v.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Maquina = Maquina;