// Stats / social proof — big numbers grid
const statsStyles = {
  wrap: { padding: '140px 0', borderBottom: '1px solid var(--line)', position: 'relative', overflow: 'hidden' },
  head: { marginBottom: 56, maxWidth: 820 },
  title: {
    fontFamily: "'Instrument Serif', serif",
    fontSize: 72, lineHeight: 0.95, letterSpacing: '-0.02em',
    margin: 0,
  },
  grid: {
    display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
    borderTop: '1px solid var(--line)',
  },
  cell: {
    padding: '40px 28px 32px 0',
    borderRight: '1px solid var(--line)',
    display: 'flex', flexDirection: 'column', gap: 8,
  },
  last: { borderRight: 'none', paddingRight: 0 },
  big: {
    fontFamily: "'Instrument Serif', serif",
    fontSize: 96, lineHeight: .9, letterSpacing: '-0.03em',
    color: 'var(--ink)',
    display: 'flex', alignItems: 'baseline', gap: 6,
  },
  unit: { fontFamily: "'JetBrains Mono', monospace", fontSize: 18, color: 'var(--accent)' },
  label: {
    marginTop: 12,
    fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.45, maxWidth: 220,
  },
  badge: {
    display: 'inline-flex', alignItems: 'center', gap: 6,
    padding: '3px 8px', borderRadius: 999,
    fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '.1em',
    background: 'rgba(var(--accent-rgb),.1)', color: 'var(--accent)',
    alignSelf: 'flex-start', marginBottom: 6,
  },
};

function Stats() {
  const [ref, shown] = useReveal({threshold: .25});
  const n1 = useCountUp(87,  { when: shown });
  const n2 = useCountUp(48,  { when: shown });
  const n3 = useCountUp(2.4, { when: shown, decimals: 1 });
  const n4 = useCountUp(90,  { when: shown });

  const cells = [
    { v: n1, u: '%',    l: 'Taux de qualification moyen sur l\'ensemble des secteurs.', badge: 'TAUX' },
    { v: n2, u: 'k',    l: 'Leads livrés aux clients en 2025 (YTD avril).', badge: 'VOLUME' },
    { v: n3, u: '×',    l: 'ROAS médian constaté sur 6 mois par nos clients PPL.', badge: 'ROAS' },
    { v: n4, u: 'sec',  l: 'Délai médian entre capture et livraison CRM.', badge: 'VITESSE' },
  ];

  return (
    <section style={statsStyles.wrap} ref={ref} className="section-pad">
      <div className="wrap">
        <div style={statsStyles.head}>
          <div className="eyebrow" style={{marginBottom: 20}}>Résultats mesurés</div>
          <h2 style={statsStyles.title} className="h-display-2">
            Chiffres <span className="serif italic">concrets</span>,<br/>
            pas de promesses <span className="serif italic" style={{color:'var(--accent)'}}>molles</span>.
          </h2>
        </div>
        <div style={statsStyles.grid} className="stats-grid">
          {cells.map((c, i) => (
            <div key={i} style={{...statsStyles.cell, ...(i === cells.length - 1 ? statsStyles.last : {})}} className="stats-cell">
              <span style={statsStyles.badge}>{c.badge}</span>
              <div style={statsStyles.big} className="stats-big">
                <span>{typeof c.v === 'number' && c.v % 1 !== 0 ? c.v.toFixed(1) : c.v}</span>
                <span style={statsStyles.unit}>{c.u}</span>
              </div>
              <div style={statsStyles.label}>{c.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Stats });