/* At a glance — kinetic metric board: scroll-driven reveal, roll-up digits, spotlight hover. */
const STATS = [
  { v: 37, suf: '+', k: 'Websites shipped', d: 'Screenshots supplied by ZaviFx', note: 'Every build in the showcase above is live work — filter the portfolio by category to open each one full page.' },
  { v: 12, suf: '', k: 'Disciplines in-house', d: 'Strategy to performance', note: 'One brief covers SEO, build, design, content and paid — coordinated by a single strategist.' },
  { t: 'Hyderabad', k: 'Where the team sits', d: 'Working worldwide', note: 'Telangana, India — engagements run across IST, GMT and EST windows.' },
  { v: 48, suf: 'h', k: 'Proposal turnaround', d: 'After the discovery call', note: 'Scope, timeline and a fixed price in writing, within two working days of the first call.' },
];

function StatsBoard() {
  const ref = React.useRef(null);
  const [live, setLive] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setLive(true); return; }
    const io = new IntersectionObserver((es) => { if (es[0].isIntersecting) { setLive(true); io.disconnect(); } }, { threshold: 0.25 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const move = (e) => {
    const el = e.currentTarget, r = el.getBoundingClientRect();
    el.style.setProperty('--mx', (e.clientX - r.left) + 'px');
    el.style.setProperty('--my', (e.clientY - r.top) + 'px');
  };
  return (
    <section className="zx-gl" ref={ref} data-live={live ? '' : undefined}>
      <span className="zx-gl__grid" aria-hidden="true" />
      <div className="zx-container zx-gl__inner">
        <header className="zx-gl__head">
          <span className="zx-gl__eyebrow">At a glance</span>
          <h2 className="zx-gl__h2">The shape of a ZaviFx engagement, in four numbers</h2>
          <p className="zx-gl__lede">Hover any panel for the detail behind the figure.</p>
        </header>
        <div className="zx-gl__row">
          {STATS.map((s, n) => (
            <article key={s.k} className="zx-gl__cell" style={{ '--i': n }} onMouseMove={move} tabIndex={0}>
              <span className="zx-gl__spot" aria-hidden="true" />
              <span className="zx-gl__rule" aria-hidden="true" />
              <span className="zx-gl__idx">{String(n + 1).padStart(2, '0')}</span>
              <span className="zx-gl__v">{s.v ? <CountUp value={s.v} suffix={s.suf} /> : s.t}</span>
              <span className="zx-gl__k">{s.k}</span>
              <span className="zx-gl__d">{s.d}</span>
              <span className="zx-gl__note">{s.note}</span>
              <span className="zx-gl__arrow" aria-hidden="true">
                <svg width="16" height="16" viewBox="0 0 18 18" fill="none"><path d="M5.5 12.5 12.5 5.5M6.5 5.5h6v6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </span>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { StatsBoard, STATS });