function Ayudarte() {
  const stats = [
    { unit: "Claridad",   color: "var(--pink)",  title: "No sabes qué campaña funciona" },
    { unit: "Control",    color: "#FFB020",       title: "No puedes planificar ni escalar" },
    { unit: "Constancia", color: "var(--pink)",  title: "Dependes del boca en boca" },
  ];

  const C = 326.726;

  function Gauge({ color, unit, delay = 0 }) {
    const [val, setVal] = useState(100);
    const ref = useRef(null);
    useEffect(() => {
      const el = ref.current;
      if (!el) return;
      let raf, started = false;
      const animate = () => {
        const dur = 1500, t0 = performance.now() + delay;
        const tick = (now) => {
          if (now < t0) { raf = requestAnimationFrame(tick); return; }
          const p = Math.min(1, (now - t0) / dur);
          const eased = 1 - Math.pow(1 - p, 3);
          setVal(Math.round(100 * (1 - eased)));
          if (p < 1) raf = requestAnimationFrame(tick);
        };
        raf = requestAnimationFrame(tick);
      };
      const start = () => { if (started) return; started = true; cleanup(); animate(); };
      const check = () => {
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight - 40 && r.bottom > 0) { start(); 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(); cancelAnimationFrame(raf); };
    }, [delay]);
    const offset = C * (1 - val / 100);
    return (
      <div className="stat-gauge" ref={ref}>
        <svg width="128" height="128" viewBox="0 0 128 128">
          <circle cx="64" cy="64" r="52" fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="8" />
          <circle cx="64" cy="64" r="52" fill="none" stroke={color} strokeWidth="8" strokeLinecap="round"
                  strokeDasharray={C} strokeDashoffset={offset} transform="rotate(-90 64 64)"
                  style={{ transition: "stroke-dashoffset 80ms linear" }} />
        </svg>
        <div className="stat-val">
          <b style={{ color }}>{val}%</b>
          <span>{unit}</span>
        </div>
      </div>
    );
  }

  return (
    <section className="sabemos section">
      <Sticker kind="star" className="sab-stk sab-stk-1 anim" />
      <Sticker kind="sparkle" className="sab-stk sab-stk-2 anim" style={{ animationDelay: "0.8s" }} />
      <Sticker kind="squig" className="sab-stk sab-stk-3" />
      <Sticker kind="plus" className="sab-stk sab-stk-4 anim" style={{ animationDelay: "1.2s" }} />
      <div className="wrap">
        <Reveal as="div" className="stat-head">
          <div className="diag-eyebrow"><span className="diag-eyebrow-dot"></span>Diagnóstico</div>
          <h2 className="sabemos-title"><span className="pink">Sabemos</span> por lo que estás pasando</h2>
          <p className="sabemos-sub">Invertir en marketing sin claridad de qué realmente funciona. Lo vemos a diario.</p>
        </Reveal>

        <Reveal as="div" className="stat-row">
          {stats.map((s, i) => (
            <div key={i} className="stat-card">
              <Gauge color={s.color} unit={s.unit} delay={i * 220} />
              <div className="stat-title">{s.title}</div>
            </div>
          ))}
        </Reveal>

        <Reveal as="p" className="stat-close">
          No construyes un negocio predecible con herramientas impredecibles.
          <strong> Por eso desarrollamos sistemas que lo resuelven.</strong>
        </Reveal>
      </div>
    </section>
  );
}
Object.assign(window, { Ayudarte });