// Honest numbers — fewer, with real context, not dashboard bingo
const StatBlock = ({ value, suffix = '', prefix = '', label, sub, decimals = 0, big }) => {
  const [ref, v] = useCountUp(value, { duration: 1800, decimals });
  return (
    <div ref={ref} style={{
      padding: 'clamp(28px, 4vw, 40px) clamp(22px, 3.5vw, 32px)',
      borderRight: '1px solid var(--line)',
      borderBottom: '1px solid var(--line)'
    }}>
      <div style={{
        fontSize: big ? 'clamp(56px, 8vw, 112px)' : 'clamp(40px, 5.5vw, 76px)',
        fontFamily: 'var(--serif)',
        fontWeight: 400,
        lineHeight: 0.95,
        letterSpacing: '-0.03em',
        display:'flex', alignItems:'baseline', gap: 4
      }}>
        {prefix && <span style={{ fontSize: '0.5em', color:'var(--fg-3)' }}>{prefix}</span>}
        {v}
        {suffix && <span style={{ fontSize: '0.5em', color:'var(--fg-3)' }}>{suffix}</span>}
      </div>
      <div className="mono" style={{
        fontSize: 11, color: 'var(--fg-3)', marginTop: 16,
        letterSpacing: '.14em', textTransform:'uppercase'
      }}>{label}</div>
      {sub && <div style={{ fontSize: 14, color:'var(--fg-2)', marginTop: 10, maxWidth: 320, lineHeight: 1.5 }}>{sub}</div>}
    </div>
  );
};

const Stats = () => {
  const ref = useReveal();
  return (
    <section id="stats" className="section-tight" style={{ position:'relative' }}>
      <div className="container">
        <div ref={ref} className="reveal">
          <div style={{ marginBottom: 48, maxWidth: 760 }}>
            <span className="eyebrow">A few honest numbers</span>
            <h2 className="h-xl" style={{ marginTop: 20 }}>
              We'd rather say less, <span className="serif-i" style={{color:'var(--accent)'}}>accurately.</span>
            </h2>
            <p style={{ fontSize: 17, color:'var(--fg-2)', marginTop: 20, lineHeight: 1.55, maxWidth: 580 }}>
              Most agency stat walls are fiction. These four are boring on purpose — they're the ones we can point at a spreadsheet for.
            </p>
          </div>

          <div className="grid-2" style={{
            border: '1px solid var(--line)',
            borderBottom: 0,
            borderRight: 0,
            gap: 0,
            background: 'var(--card-bg)'
          }}>
            <StatBlock big value={42} label="Clients, since 2023" sub="Mostly trades, clinics and small e-comm brands around Sydney. A handful remote."/>
            <StatBlock value={2} label="People on the team" sub="Sam (builds) and Avani (ads + SEO). That's it. You'll be emailing both of us."/>
            <StatBlock value={89} suffix="%" label="Still with us after year one" sub="Not a retention flex — more that we try not to take clients we can't actually help."/>
            <StatBlock value={1} suffix=" day" label="Average reply time" sub="Measured over the last 90 days. Slower on Fridays. Honest."/>
          </div>

          <div style={{
            marginTop: 24,
            fontSize: 13, color:'var(--fg-3)',
            fontStyle:'italic', fontFamily:'var(--serif)',
            maxWidth: 580,
          }}>
            What we don't put here: ROAS averages, "revenue influenced", industry benchmarks. They're either cherry-picked or made up. Happy to walk through real client numbers on a call.
          </div>
        </div>
      </div>
    </section>
  );
};

window.Stats = Stats;