/* burp.agency homepage — Stats (count-up on enter view) */

/* ─── useCountUp: simple count-up animation that runs once on mount ── */
const useCountUp = (target, duration = 1400, startDelay = 0) => {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    let raf;
    const begin = performance.now() + startDelay;
    const tick = now => {
      if (now < begin) { raf = requestAnimationFrame(tick); return; }
      const t = Math.min(1, (now - begin) / duration);
      const eased = 1 - Math.pow(1 - t, 3);
      setVal(target * eased);
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, duration, startDelay]);
  return val;
};

const Stat = ({ value, suffix, label, delay = 0 }) => {
  const v = useCountUp(value, 1400, delay);
  const display = value % 1 === 0 ? Math.round(v) : v.toFixed(1);
  return (
    <div style={{ borderTop: '1px solid var(--color-warm-gray)', paddingTop: 24 }}>
      <div style={{
        fontFamily: 'Georgia, serif', fontWeight: 400,
        fontSize: 'clamp(56px, 7vw, 112px)',
        letterSpacing: '-0.025em', lineHeight: 1,
        color: 'var(--color-ink)',
      }}>
        {display}<span style={{ color: 'var(--color-orange)' }}>{suffix}</span>
      </div>
      <div style={{
        marginTop: 16,
        fontFamily: 'Inter, sans-serif',
        fontSize: 13, fontWeight: 500,
        lineHeight: 1.5,
        color: 'var(--color-mid-gray)',
        maxWidth: '28ch',
      }}>{label}</div>
    </div>
  );
};

const Stats = () => {
  return (
    <Section bg="cream" label="Stats">
      <Container>
        <Reveal><Label>BY THE NUMBERS</Label></Reveal>
        <Reveal delay={120}>
          <h2 style={{
            fontFamily: 'Georgia, serif', fontWeight: 400,
            fontSize: 'clamp(36px, 4.8vw, 64px)',
            letterSpacing: '-0.018em', lineHeight: 1.1,
            color: 'var(--color-ink)', margin: '24px 0 0',
            maxWidth: '22ch',
          }}>Receipts, not promises.</h2>
        </Reveal>

        <div className="stats-grid" style={{
          marginTop: 80,
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 40,
        }}>
          <Stat value={6}   suffix="+"   label="B2B SaaS clients shipped to, from pre-seed to Series B." delay={0}/>
          <Stat value={47}  suffix=""    label="Long-form SEO pieces ranking on page one this quarter." delay={120}/>
          <Stat value={3.2} suffix="×"   label="Median uplift in organic traffic, three-month average." delay={240}/>
          <Stat value={15}  suffix="min" label="The audit. No deck. Just the answer." delay={360}/>
        </div>
      </Container>
    </Section>
  );
};

Object.assign(window, { Stats });