// Stats.jsx — quiet 3-up number strip.

const statsStyles = {
  section: (mob) => ({
    padding: mob ? '24px 16px' : '40px 32px',
    maxWidth: 1120, margin: '0 auto',
  }),
  grid: (cols) => ({
    display: 'grid',
    gridTemplateColumns: cols === 1 ? '1fr' : 'repeat(3, 1fr)',
    border: '1px solid var(--border)',
    borderRadius: 16,
    background: 'var(--bg-elevated)',
    overflow: 'hidden',
  }),
  cell: (stacked) => ({
    padding: '28px 32px',
    display: 'flex', flexDirection: 'column', gap: 6,
    borderLeft: stacked ? 0 : '1px solid var(--border-subtle)',
    borderTop: stacked ? '1px solid var(--border-subtle)' : 0,
  }),
  first: { borderLeft: 0, borderTop: 0 },
  number: {
    font: 'var(--type-display-md)',
    letterSpacing: '-0.02em',
    color: 'var(--fg)',
  },
  numberAccent: { color: 'var(--accent-press)' },
  label: {
    font: 'var(--type-body-sm)', color: 'var(--fg-muted)',
  },
};

function Stats() {
  const { isMobile, isNarrow } = useViewport();
  const cols = isNarrow ? 1 : 3;
  const stacked = cols === 1;

  return (
    <section style={statsStyles.section(isMobile)}>
      <div style={statsStyles.grid(cols)}>
        <div style={{ ...statsStyles.cell(stacked), ...statsStyles.first }}>
          <span style={{ ...statsStyles.number, ...statsStyles.numberAccent }}>3.2 s</span>
          <span style={statsStyles.label}>Average time to compress a 02:14 1080p clip on Apple Silicon.</span>
        </div>
        <div style={statsStyles.cell(stacked)}>
          <span style={statsStyles.number}>0 bytes</span>
          <span style={statsStyles.label}>Uploaded. Your files never leave your computer.</span>
        </div>
        <div style={statsStyles.cell(stacked)}>
          <span style={statsStyles.number}>200+</span>
          <span style={statsStyles.label}>Input formats. Everything FFmpeg can read, FFkit can read.</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Stats });