// Stats — "What a month looks like." Count-up on scroll.
const Stats = () => {
  const stats = [
    { target: 40,  prefix: '',  suffix: '+',    label: 'Estimates followed up in 30 days' },
    { target: 40,  prefix: '$', suffix: 'K',    label: 'Recovered in unpaid invoices' },
    { target: 13,  prefix: '',  suffix: ' hrs', label: 'Saved per week on admin' },
  ];
  const [counts, setCounts] = React.useState(stats.map(() => 0));
  const sectionRef = React.useRef(null);
  const rafRef = React.useRef(null);

  React.useEffect(() => {
    const section = sectionRef.current;
    if (!section) return;
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        if (rafRef.current) cancelAnimationFrame(rafRef.current);
        const duration = 1800;
        const startTime = performance.now();
        const animate = (now) => {
          const elapsed = now - startTime;
          const p = Math.min(elapsed / duration, 1);
          const eased = p === 1 ? 1 : 1 - Math.pow(2, -10 * p);
          setCounts(stats.map(s => Math.round(s.target * eased)));
          if (p < 1) rafRef.current = requestAnimationFrame(animate);
        };
        rafRef.current = requestAnimationFrame(animate);
      } else {
        if (rafRef.current) cancelAnimationFrame(rafRef.current);
        setCounts(stats.map(() => 0));
      }
    }, { threshold: 0.35 });
    observer.observe(section);
    return () => { observer.disconnect(); if (rafRef.current) cancelAnimationFrame(rafRef.current); };
  }, []);

  const mob = useIsMobile();

  return (
    <section
      ref={sectionRef}
      id="stats"
      data-screen-label="03 Stats"
      style={{ background: '#2C365A', color: '#FFFFFF', padding: mob ? '64px 20px 60px' : '140px 32px 120px' }}
    >
      <div className="wrap" style={{ display: 'flex', flexDirection: 'column', gap: mob ? 36 : 80 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div className="reveal-left" style={{
            fontSize: 11, fontWeight: 700, letterSpacing: '0.22em',
            textTransform: 'uppercase', color: '#C4BCB0',
            display: 'inline-flex', alignItems: 'center', gap: 12,
          }}>
            <span style={{ width: 28, height: 1, background: 'rgba(196,188,176,0.5)' }} />
            The work
          </div>
          <h2 className="reveal" style={{
            margin: 0, fontFamily: 'Clash Display, General Sans, system-ui',
            fontSize: mob ? 'clamp(32px, 9vw, 48px)' : 'clamp(36px, 4.6vw, 64px)',
            fontWeight: 700, lineHeight: 1.04,
            letterSpacing: '-0.03em', color: '#FFFFFF',
          }}>
            What a month<br />of back office looks like.
          </h2>
          <p className="reveal" style={{
            margin: 0, fontSize: mob ? 15 : 16, lineHeight: 1.65,
            color: 'rgba(255,255,255,0.62)',
          }}>
            Representative numbers from a recent client, a working contractor who
            had stopped chasing late invoices and was quoting from memory.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: mob ? '1fr' : 'repeat(3, 1fr)',
          gap: 0,
          borderTop: '1px solid rgba(238,232,223,0.14)',
          borderBottom: mob ? 'none' : '1px solid rgba(238,232,223,0.14)',
        }}>
          {stats.map((s, i) => (
            <div key={s.label} className="reveal" style={{
              transitionDelay: `${i * 0.1}s`,
              padding: mob ? '28px 0' : '56px 32px 56px 0',
              paddingLeft: mob ? 0 : (i > 0 ? 40 : 0),
              borderRight: mob ? 'none' : (i < 2 ? '1px solid rgba(238,232,223,0.14)' : 'none'),
              borderBottom: mob ? '1px solid rgba(238,232,223,0.14)' : 'none',
            }}>
              <div style={{
                fontSize: 11, fontWeight: 700, letterSpacing: '0.18em',
                textTransform: 'uppercase', color: '#C8874A', marginBottom: 16,
              }}>0{i + 1}</div>
              <div style={{
                fontFamily: 'Clash Display, General Sans, system-ui',
                fontSize: mob ? 'clamp(56px, 16vw, 80px)' : 'clamp(64px, 7.8vw, 108px)',
                fontWeight: 700, lineHeight: 0.95,
                letterSpacing: '-0.035em', color: '#EEE8DF',
                fontVariantNumeric: 'tabular-nums',
              }}>
                {s.prefix}{counts[i]}{s.suffix}
              </div>
              <div style={{
                marginTop: 20, fontSize: 15, fontWeight: 400,
                color: '#FFFFFF', lineHeight: 1.45,
              }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Stats = Stats;