function Stats() {
  useReveal();
  const stats = [
    { num: 152, suffix: '+', unit: '件', label: 'PROJECTS', desc: '2017年の創業以来、累計150件を超える受託開発を担当。' },
    { num: 38, suffix: '', unit: '社', label: 'ENTERPRISE CLIENTS', desc: '東証プライム上場・金融・製造・インフラを中心とした大企業様。' },
    { num: 94, suffix: '%', unit: '', label: 'RETENTION RATE', desc: '継続発注率。設計・運用までを一貫支援する「伴走」スタイル。' },
    { num: 47, suffix: '', unit: '名', label: 'TEAM SIZE', desc: 'エンジニア・デザイナー・PMが同じ卓を囲む、小さな専門家集団。' },
  ];
  return (
    <section className="stats" id="stats">
      <div className="wrap">
        <div className="section-header reveal">
          <p className="h-eyebrow"><span className="num">02</span>BY THE NUMBERS</p>
          <h2 className="h-section">数字で見る、<br/>チムワークス。</h2>
          <div className="meta-row">
            <span className="mono small">/ 2026年04月 現在</span>
            <span className="mono small">SINCE 2017 — TOKYO / FUKUOKA</span>
          </div>
        </div>
      </div>
      <div className="stats-grid reveal-stagger">
        {stats.map((s, i) => <StatCell key={i} {...s} idx={i} />)}
      </div>
    </section>
  );
}

function StatCell({ num, suffix, unit, label, desc, idx }) {
  const [val, ref] = useCountUp(num, 1800 + idx * 150);
  const display = Number.isInteger(num) ? Math.floor(val) : val.toFixed(1);
  return (
    <div className="stat" ref={ref}>
      <div>
        <div className="stat-label"><span style={{ color: 'var(--shu)' }}>{String(idx + 1).padStart(2, '0')}</span> / {label}</div>
      </div>
      <div className="stat-num mono">
        {display}
        {suffix && <span className="plus">{suffix}</span>}
        {unit && <span className="unit">{unit}</span>}
      </div>
      <div className="stat-desc">{desc}</div>
    </div>
  );
}

Object.assign(window, { Stats });