// stats.jsx — gigantic stat numbers with chrome fill
const { useRef: __str, useState: __sts, useEffect: __ste } = React;

function Stats({ t }) {
  return (
    <section style={{
      borderTop: '1.5px solid var(--ink)',
      borderBottom: '1.5px solid var(--ink)',
      paddingTop: 80, paddingBottom: 80,
      position: 'relative', overflow: 'hidden'
    }}>
      <div className="wrap">
        <div className="reveal kicker" style={{ marginBottom: 48 }}>
          <span className="dot"></span>{t.stats_eye}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
          {t.stats.map((s, i) => {
            const colors = ['magenta', 'azure', 'lime', 'tangerine'];
            return (
              <div key={i} className="reveal" style={{
                borderTop: '3px solid var(--ink)', paddingTop: 24,
                position: 'relative'
              }}>
                <div className="display chrome-text" style={{
                  fontSize: 'clamp(64px, 9vw, 140px)',
                  fontWeight: 800,
                  fontVariationSettings: '"wdth" 75',
                  lineHeight: 0.9, marginBottom: 20,
                }}>
                  {s.n}
                </div>
                <div style={{
                  display: 'inline-block', padding: '4px 10px',
                  background: `var(--${colors[i]})`,
                  color: i === 2 ? 'var(--ink)' : 'white',
                  fontFamily: 'var(--font-mono)', fontSize: 11,
                  fontWeight: 700, letterSpacing: '0.14em',
                  textTransform: 'uppercase', borderRadius: 4
                }}>{s.l}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Stats });