// Live counter — increments at the current enforcement pace.
// Uses requestAnimationFrame for smooth ticking.

function LiveCounter({ perDay = 1260, label = 'FY2026 ESTIMATED PACE' }) {
  const [count, setCount] = React.useState(0);
  const startRef = React.useRef(null);
  const perMs = perDay / 86400000; // removals per millisecond

  React.useEffect(() => {
    startRef.current = performance.now();
    let raf;
    const tick = (now) => {
      const elapsed = now - startRef.current;
      setCount(Math.floor(elapsed * perMs));
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [perMs]);

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }} aria-live="polite" aria-label={`${label}: ${count} removals since page load`}>
      <span className="mono" style={{ color: '#5A4E3A', fontSize: 9.5, letterSpacing: 0.2, textTransform: 'uppercase' }}>
        {label}
      </span>
      <span className="mono" style={{ color: '#C0392B', fontSize: 12, fontWeight: 700, letterSpacing: 0.04 }}>
        +{count}
      </span>
      <span style={{
        width: 6, height: 6, background: '#C0392B', borderRadius: '50%',
        animation: 'pulse 1.6s ease-in-out infinite',
      }} />
    </div>
  );
}

Object.assign(window, { LiveCounter });