function Counter({ to, suffix = '', decimals = 0 }) {
  const [v, setV] = React.useState(0);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    let started = false;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !started) {
          started = true;
          const start = performance.now();
          const dur = 1800;
          const tick = (now) => {
            const t = Math.min(1, (now - start) / dur);
            const eased = 1 - Math.pow(1 - t, 3);
            setV(to * eased);
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.3 });
    io.observe(el);
    return () => io.disconnect();
  }, [to]);
  return <span ref={ref}>{v.toFixed(decimals)}<span className="stat-suffix">{suffix}</span></span>;
}

function Stats() {
  return (
    <section style={{paddingTop:0}} id="stats">
      <div className="container">
        <div className="stats reveal">
          <div className="stat">
            <div className="stat-tag">USERS</div>
            <div className="stat-num"><Counter to={2.4} decimals={1} suffix="M" /></div>
            <div className="stat-label">active humans carrying their CoPilot across 60+ countries</div>
          </div>
          <div className="stat">
            <div className="stat-tag">COMPUTE</div>
            <div className="stat-num"><Counter to={18} suffix="K" /></div>
            <div className="stat-label">proprietary GPUs running inference on the Veiron Grid</div>
          </div>
          <div className="stat">
            <div className="stat-tag">SIGNALS / DAY</div>
            <div className="stat-num"><Counter to={1.1} decimals={1} suffix="B" /></div>
            <div className="stat-label">biosignal events processed privately, end-to-end</div>
          </div>
          <div className="stat">
            <div className="stat-tag">LATENCY</div>
            <div className="stat-num"><Counter to={42} suffix="ms" /></div>
            <div className="stat-label">median response time — closer to a thought than a query</div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Stats = Stats;