// Stats.jsx — figures
const Stats = () => {
  const items = [
    ["70", "+", "Collaborateurs", "Photographes, motion designers, dev WebGL, copy seniors, media buyers."],
    ["9", "", "Fuseaux horaires", "Réseau international orchestré projet par projet depuis Lyon."],
    ["48", "h", "Mise en escadron", "Créa, data et production assemblées en moins de deux jours."],
  ];
  return (
    <section style={{
      background: "#1A2E1E", color: "#fff", padding: "220px 56px",
      fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
    }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <div style={{ fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase", opacity: .65, marginBottom: 32, fontWeight: 700 }}>
          03 — Méthode &amp; équipe
        </div>
        <h2 style={{ fontSize: "clamp(72px, 8vw, 128px)", lineHeight: .98, letterSpacing: "-0.025em", fontWeight: 700, margin: "0 0 140px", maxWidth: 1400 }}>
          Analyser. Traduire.<br/><i>Incarner.</i>
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 48 }}>
          {items.map(([n, suffix, label, desc]) => (
            <div key={label} style={{ borderTop: "1px solid rgba(255,255,255,.25)", paddingTop: 24 }}>
              <div style={{ display: "flex", alignItems: "flex-start", marginBottom: 18 }}>
                <span style={{ fontSize: "clamp(120px, 14vw, 200px)", lineHeight: .9, fontWeight: 700, letterSpacing: "-0.04em" }}>{n}</span>
                <span style={{ fontSize: "clamp(48px, 5vw, 72px)", lineHeight: 1, fontWeight: 700, letterSpacing: "-0.02em", marginTop: 16 }}>{suffix}</span>
              </div>
              <div style={{ fontSize: 13, letterSpacing: ".22em", opacity: .65, fontWeight: 700, marginBottom: 16 }}>{label.toUpperCase()}</div>
              <div style={{ fontSize: 19, lineHeight: 1.5, opacity: .82, maxWidth: 380 }}>{desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Stats = Stats;