/* global React */
// Animated counter row — 480+ / 48+ / <1ms, with thin gold dividers.

const useCount = (target, duration = 1400, start = false) => {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    if (!start) return;
    const t0 = performance.now();
    let raf;
    const tick = (now) => {
      const p = Math.min(1, (now - t0) / duration);
      // easeOutCubic
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(Math.round(target * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, duration, start]);
  return val;
};

const StatItem = ({ target, prefix = '', suffix = '', label, start }) => {
  const count = useCount(target, 1400, start);
  return (
    <div style={{ textAlign: 'center' }}>
      <div
        style={{
          fontSize: 52,
          fontWeight: 700,
          lineHeight: 1,
          color: 'var(--mlc-cream)',
          letterSpacing: '-0.02em',
          fontVariantNumeric: 'tabular-nums',
        }}
      >
        {prefix}{count}{suffix}
      </div>
      <div
        style={{
          marginTop: 12,
          fontSize: 12,
          fontWeight: 500,
          color: 'rgba(254,255,238,0.45)',
          letterSpacing: '0.08em',
          textTransform: 'uppercase',
        }}
      >
        {label}
      </div>
    </div>
  );
};

const Stats = () => {
  const ref = React.useRef(null);
  const [start, setStart] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { setStart(true); io.disconnect(); } },
      { threshold: 0.3 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);

  const Divider = ({ id }) => (
    <div
      key={id}
      style={{
        width: 1,
        height: 64,
        background: 'linear-gradient(to bottom, transparent, rgba(244,205,99,0.25), transparent)',
      }}
    />
  );

  return (
    <section
      id="stats"
      ref={ref}
      data-screen-label="02 Stats"
      style={{ padding: '72px 32px', position: 'relative', zIndex: 1 }}
    >
      <div
        style={{
          maxWidth: 960,
          margin: '0 auto',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 32,
        }}
      >
        <StatItem target={480} suffix="+" label="Indicators" start={start} />
        <Divider id="d1" />
        <StatItem target={48} suffix="+" label="Exchanges" start={start} />
        <Divider id="d2" />
        <StatItem target={1} prefix="<" suffix="ms" label="Latency" start={start} />
      </div>
    </section>
  );
};

window.Stats = Stats;