/* La acumulación de capacidad — sección interactiva (Cómo funciona) */
/* usa los globals useState/useEffect/useRef (declarados en comofunciona.jsx) */

function CapCounter({ to, dec = 0, prefix = "", suffix = "", 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 = 2000 / 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 className="u">{suffix}</span></span>;
}

const CAP_LAYERS = [
  { b: "Automatización financiera", s: "+320 h recuperadas / mes" },
  { b: "Dashboard ejecutivo", s: "+18% velocidad operativa" },
  { b: "Integración de sistemas", s: "+12% productividad" },
  { b: "Agente IA comercial", s: "+25% capacidad de atención" },
  { b: "Predicción de demanda", s: "−15% desperdicio operativo" },
];
const CAP_MARKERS = [
  { x: 210, y: 360, m: "+320 h", d: 0.8 },
  { x: 400, y: 312, m: "+18%", d: 1.3 },
  { x: 560, y: 248, m: "+12%", d: 1.8 },
  { x: 770, y: 150, m: "+25%", d: 2.3 },
  { x: 915, y: 70, m: "−15%", d: 2.8 },
];
const CAP_CIRCUIT = ["Productividad", "Capacidad operativa", "Ingresos", "Valor empresarial"];

function CapCircuit() {
  const [step, setStep] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setStep((s) => (s + 1) % (CAP_CIRCUIT.length + 1)), 700);
    return () => clearInterval(t);
  }, []);
  return (
    <div className="cap-circuit reveal">
      {CAP_CIRCUIT.map((n, i) => (
        <React.Fragment key={n}>
          {i > 0 && <div className={"cap-arrow" + (step > i ? " lit" : "")}></div>}
          <div className={"cap-node" + (step > i ? " lit" : "")}>{n}</div>
        </React.Fragment>
      ))}
    </div>
  );
}

function CapacidadAcumulada({ anim = 1 }) {
  return (
    <section className="capacidad" id="capacidad" data-screen-label="Acumulación de capacidad">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="kicker">La acumulación de capacidad</span>
          <h2>Su empresa no crece de forma lineal.<br/>Crece cada vez que elimina una restricción.</h2>
          <p>Cada iniciativa ejecutada aumenta la capacidad operativa de la organización, permitiéndole producir más valor con los mismos recursos.</p>
        </div>

        {/* gráfica principal */}
        <div className="cap-chart reveal">
          <span className="org-tag">Crecimiento orgánico</span>
          <span className="bac-tag">Crecimiento con Bacatá Dynamics</span>
          <svg className="cap-svg" viewBox="0 0 1000 420" preserveAspectRatio="none">
            <defs>
              <linearGradient id="capArea" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="rgba(103,182,239,.32)" />
                <stop offset="100%" stopColor="rgba(103,182,239,0)" />
              </linearGradient>
            </defs>
            <g className="cap-grid">
              <line x1="40" y1="100" x2="960" y2="100" /><line x1="40" y1="200" x2="960" y2="200" />
              <line x1="40" y1="300" x2="960" y2="300" /><line x1="40" y1="380" x2="960" y2="380" />
            </g>
            <path className="cap-flat" d="M40 372 C 300 366, 600 360, 960 348" />
            <path className="cap-area" d="M40 372 C 240 364,340 344,470 300 S 720 196,840 126 S 930 78,960 56 L960 400 L40 400 Z" fill="url(#capArea)" />
            <path className="cap-exp" d="M40 372 C 240 364,340 344,470 300 S 720 196,840 126 S 930 78,960 56" />
            {CAP_MARKERS.map((mk, i) => (
              <g className="cap-mk" key={i} style={{ animationDelay: (anim > 0 ? mk.d : 0) + "s" }}>
                <text className="mk-m" x={mk.x} y={mk.y - 16} textAnchor="middle">{mk.m}</text>
                <circle cx={mk.x} cy={mk.y} r="6" />
              </g>
            ))}
          </svg>
          <div className="cap-layers">
            {CAP_LAYERS.map((l) => (
              <div className="cap-layer" key={l.b}><b>{l.b}</b><span>{l.s}</span></div>
            ))}
          </div>
        </div>

        {/* split */}
        <div className="cap-split reveal">
          <div className="cap-card trad">
            <h4>Empresa tradicional</h4>
            <div className="sub">Crecimiento lineal y lento</div>
            <svg viewBox="0 0 400 130" preserveAspectRatio="none"><path className="mini" d="M10 104 L 390 84" /></svg>
          </div>
          <div className="cap-card us">
            <h4>Empresa con Bacatá Dynamics</h4>
            <div className="sub">Crecimiento acelerado y compuesto</div>
            <svg viewBox="0 0 400 130" preserveAspectRatio="none"><path className="mini" d="M10 116 C 110 112, 210 104, 295 82 C 345 68, 384 40, 396 4" /></svg>
          </div>
        </div>

        {/* circuito */}
        <CapCircuit />

        {/* cita central */}
        <div className="cap-quote reveal">
          <h3>La mayoría de las empresas persiguen más ventas. Las organizaciones de mayor desempeño construyen más capacidad.</h3>
          <p>Cada automatización, cada integración, cada sistema y cada modelo de inteligencia artificial permanece dentro de la organización y multiplica el valor de las siguientes iniciativas.</p>
        </div>

        {/* indicadores finales */}
        <div className="cap-ind reveal">
          <div className="cap-ind-b">
            <div className="ind-l">Productividad</div>
            <div className="ind-n"><CapCounter to={3.1} dec={1} suffix="x" anim={anim} /></div>
            <div className="ind-seq">1.0x → 1.3x → 1.8x → 2.4x → 3.1x</div>
          </div>
          <div className="cap-ind-b">
            <div className="ind-l">Ganancias</div>
            <div className="ind-n"><CapCounter to={1.2} dec={1} prefix="$" suffix="B" anim={anim} /></div>
            <div className="ind-seq">$100M → $250M → $600M → $1.2B</div>
          </div>
          <div className="cap-ind-b">
            <div className="ind-l">Valor de la empresa</div>
            <div className="ind-n"><CapCounter to={22} prefix="$" suffix="B" anim={anim} /></div>
            <div className="ind-seq">$5B → $8B → $14B → $22B</div>
          </div>
        </div>

        {/* cierre */}
        <div className="cap-close reveal">
          <h3>No desarrollamos proyectos.<br/><span className="accent">Construimos capacidad.</span></h3>
          <p>Y la capacidad acumulada es lo que permite a una organización crecer más rápido, operar mejor y aumentar su valor con el tiempo.</p>
          <div className="hero-actions">
            <a className="btn btn-primary btn-lg" href="/#contacto">Comience a construir capacidad <Icon.arrow /></a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.CapacidadAcumulada = CapacidadAcumulada;