// stats.jsx — capability snapshot (no pricing, no dollar figures)
function Stats() {
  const isMobile = useIsMobile(640);
  const items = [
    { to: 3.5, suffix: '+', decimals: 1, label: 'Years AI Experience', sub: 'building production AI tools' },
    { to: 6, suffix: '+', label: 'Years in IT', sub: 'foundational technology background' },
    { to: 16, suffix: '+', label: 'Service Areas', sub: 'operations, revenue, and custom builds' },
  ];
  return (
    <section className="section" style={{ paddingTop: 60, paddingBottom: 60 }}>
      <Reveal>
        <div className="mono" style={{ color: 'var(--accent-2)', marginBottom: 16 }}>
          // WHAT WE DELIVER
        </div>
      </Reveal>
      <div className="stats-grid" style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1,
        background: 'var(--bg-line)', border: '1px solid var(--bg-line)',
        borderRadius: 16, overflow: 'hidden',
      }}>
        {items.map((s, i) => (
          <Reveal key={i} delay={i * 80}>
            <Spotlight style={{ background: 'var(--bg)', padding: isMobile ? '20px 14px' : 32, height: '100%' }}>
              <div style={{
                fontSize: isMobile ? 'clamp(28px, 7vw, 48px)' : 'clamp(36px, 4.5vw, 64px)',
                fontWeight: 500,
                letterSpacing: '-0.03em', lineHeight: 1,
                fontFeatureSettings: '"tnum"', marginBottom: isMobile ? 10 : 18,
              }}>
                <Counter to={s.to} suffix={s.suffix} decimals={s.decimals || 0} prefix={s.prefix || ''} />
              </div>
              <div style={{ fontSize: isMobile ? 12 : 14, fontWeight: 500, marginBottom: 4 }}>{s.label}</div>
              <div style={{ fontSize: isMobile ? 10 : 12, color: 'var(--ink-faint)', fontFamily: 'var(--font-mono)' }}>
                {s.sub}
              </div>
            </Spotlight>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

window.Stats = Stats;