// Stats.jsx — animated count-up + cursor-reactive spotlight
// Values are engagement commitments (the same ones quoted in the timeline, WhyUs and FAQ),
// not historical figures — we do not publish client statistics.
const STATS = [
  { v: 100, suffix: '%', l: 'Manual testing', s: 'every finding found, exploited, and confirmed by hand' },
  { v: 60,  suffix: ' min', l: 'Critical findings disclosed', s: 'in your shared channel, while testing is still under way' },
  { v: 90,  suffix: ' days', l: 'Free retest window', s: 'every High and Critical verified fixed, signed off by your tester' },
  { v: 48,  suffix: ' hrs', l: 'From scoping call to fixed fee', s: 'a written scope and price, with no change orders' },
];

const Stats = () => {
  const ref = React.useRef(null);
  const [mx, setMx] = React.useState(50);
  const [my, setMy] = React.useState(50);
  const [active, setActive] = React.useState(false);

  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setActive(true); obs.disconnect(); } }, { threshold: 0.3 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  const onMove = (e) => {
    const r = ref.current.getBoundingClientRect();
    setMx(((e.clientX - r.left) / r.width) * 100);
    setMy(((e.clientY - r.top) / r.height) * 100);
  };

  return (
    <section
      ref={ref}
      onMouseMove={onMove}
      style={{
        background: '#0a0b0c',
        borderTop: '1px solid #1a1b1e',
        borderBottom: '1px solid #1a1b1e',
        padding: '72px 32px',
        position: 'relative', overflow: 'hidden',
      }}
    >
      {/* Cursor-tracked lavender spotlight */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `radial-gradient(circle 320px at ${mx}% ${my}%, rgba(94,105,210,0.16), transparent 70%)`,
        transition: 'background 60ms linear',
      }} />
      {/* Scan-line backdrop */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.4, pointerEvents: 'none',
        maskImage: 'linear-gradient(180deg, transparent, black 40%, black 60%, transparent)',
        WebkitMaskImage: 'linear-gradient(180deg, transparent, black 40%, black 60%, transparent)',
      }}>
        <ScanlineGrid height={300} />
      </div>

      <div style={{ maxWidth: 1280, margin: '0 auto 28px', position: 'relative', zIndex: 1 }}>
        <p style={{
          fontSize: 12, fontWeight: 500, color: '#62666d',
          letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 6,
        }}>Our commitments</p>
        <h3 style={{
          fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 500,
          letterSpacing: '-0.6px', color: '#f7f8f8', margin: 0,
        }}>What every engagement includes</h3>
      </div>

      <div style={{
        maxWidth: 1280, margin: '0 auto',
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
        position: 'relative', zIndex: 1,
      }}>
        {STATS.map((s, i) => (
          <StatCell key={s.l} s={s} active={active} divider={i < STATS.length - 1} />
        ))}
      </div>
    </section>
  );
};

const StatCell = ({ s, active, divider }) => {
  const [v, setV] = React.useState(0);
  React.useEffect(() => {
    if (!active) return;
    if (s.literal) { setV(null); return; }
    const start = performance.now();
    const dur = 1400;
    let raf;
    const tick = (t) => {
      const p = Math.min(1, (t - start) / dur);
      const eased = 1 - Math.pow(1 - p, 3);
      setV(s.v * eased);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [active]);

  const display = s.literal
    ? s.literal
    : (s.decimals ? v.toFixed(s.decimals) : Math.round(v).toLocaleString()) + s.suffix;

  return (
    <div style={{
      padding: '12px 32px',
      borderRight: divider ? '1px solid #1a1b1e' : 'none',
    }}>
      <div style={{
        fontFamily: 'var(--font-display)', fontSize: 'clamp(36px, 4vw, 52px)',
        fontWeight: 600, letterSpacing: '-2px', color: '#f7f8f8',
        lineHeight: 1, marginBottom: 12,
        background: 'linear-gradient(180deg, #f7f8f8 0%, #d0d6e0 100%)',
        WebkitBackgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
        backgroundClip: 'text',
        fontVariantNumeric: 'tabular-nums',
      }}>{display}</div>
      <div style={{ fontSize: 14, color: '#f7f8f8', fontWeight: 500, marginBottom: 4 }}>{s.l}</div>
      <div style={{ fontSize: 12.5, color: '#62666d', lineHeight: 1.45 }}>{s.s}</div>
    </div>
  );
};

Object.assign(window, { Stats });