function Exito() {
  const onRows = [
    { k: "Retorno de inversión", to: 100, prefix: "", suffix: "+%" },
    { k: "Costo por cliente", to: 70, prefix: "−50–", suffix: "%" },
    { k: "Tasa de conversión", to: 120, prefix: "+60–", suffix: "%" },
    { k: "Estrategia y planeación", text: "con datos", cyan: true },
  ];
  const offRows = [
    { k: "Retorno de inversión", v: "a ciegas" },
    { k: "Costo por cliente", v: "↑ sube" },
    { k: "Tasa de conversión", v: "baja" },
    { k: "Estrategia y planeación", v: "por suposición" },
  ];

  const [armed, setArmed] = useState(false);
  useEffect(() => {
    const el = document.querySelector("#exito .exito-dash"); if (!el) return;
    const check = () => {
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight - 30 && r.bottom > 0) { setArmed(true); cleanup(); return true; }
      return false;
    };
    const cleanup = () => { window.removeEventListener("scroll", check); window.removeEventListener("resize", check); };
    if (!check()) { window.addEventListener("scroll", check, { passive: true }); window.addEventListener("resize", check); }
    return cleanup;
  }, []);

  function CountUp({ to, prefix = "", suffix = "", delay = 0, run }) {
    const [val, setVal] = useState(0);
    useEffect(() => {
      if (!run) return;
      let raf; const dur = 1300, t0 = performance.now() + delay;
      const tick = (now) => {
        if (now < t0) { raf = requestAnimationFrame(tick); return; }
        const p = Math.min(1, (now - t0) / dur);
        setVal(Math.round(to * (1 - Math.pow(1 - p, 3))));
        if (p < 1) raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
      return () => cancelAnimationFrame(raf);
    }, [run, to, delay]);
    return <span>{prefix}{val}{suffix}</span>;
  }

  return (
    <section id="exito" className="exito section">
      <Sticker kind="star" className="ex-stk ex-stk-1 anim" />
      <Sticker kind="sparkle" className="ex-stk ex-stk-2 anim" style={{ animationDelay: "0.8s" }} />
      <Sticker kind="plus" className="ex-stk ex-stk-3" />
      <Sticker kind="squig" className="ex-stk ex-stk-4" />
      <div className="wrap">
        <Reveal className="sec-head" style={{ textAlign: "center", maxWidth: 780, margin: "0 auto 8px" }}>
          <div className="eyebrow" style={{ marginBottom: 14, justifyContent: "center" }}><span className="dot"/>El costo de no decidir</div>
          <h2>Tu negocio hoy <em style={{ fontStyle: "normal", color: "rgba(255,255,255,0.45)" }}>vs.</em> <span className="cyan">con Aigenci</span></h2>
          <p style={{ margin: "14px auto 0", maxWidth: 560 }}>El mismo negocio, mismas metas — la diferencia es tener IA + datos trabajando por ti.</p>
        </Reveal>

        <Reveal className="exito-dash">
          <div className="vs-badge" aria-hidden="true">VS</div>

          <div className="ex-panel off">
            <div className="ex-ph">
              <div className="ex-who"><b>Tu negocio hoy</b><small>Marketing a ciegas</small></div>
              <span className="ex-pill"><span className="d"/>perdiendo dinero</span>
            </div>
            <div className="ex-kpis">
              {offRows.map((r, i) => (
                <div className="ex-kpi" key={i}><span className="k">{r.k}</span><span className="v">{r.v}</span></div>
              ))}
            </div>
            <div className="ex-foot">✕ Cada mes pierdes clientes con tu competencia</div>
          </div>

          <div className="ex-panel on">
            <div className="ex-ph">
              <div className="ex-who"><b>Con Aigenci</b><small>IA + datos + marketing</small></div>
              <span className="ex-pill"><span className="d"/>creciendo</span>
            </div>
            <div className="ex-kpis">
              {onRows.map((r, i) => (
                <div className="ex-kpi" key={i}>
                  <span className="k">{r.k}</span>
                  <span className={`v ${r.cyan ? "cyan" : ""}`}>
                    {r.text ? r.text : <CountUp to={r.to} prefix={r.prefix} suffix={r.suffix} delay={i * 140} run={armed} />}
                  </span>
                </div>
              ))}
            </div>
            <div className="ex-foot">✓ Un sistema que atrae y convierte solo</div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}
Object.assign(window, { Exito });