// StatStrip — 4 real stats with red +/K suffixes
const StatStrip = () => {
  // suffix chars rendered in --accent red; unit shown small below label
  const items = [
    { num: '27', suffix: '+', label: 'лет на рынке (с 1999)' },
    { num: '8',  suffix: '',  label: 'действующих АЗС' },
    { num: '5',  suffix: 'K', unit: 'м³', label: 'собственные резервуары' },
    { num: '70', suffix: 'K+', unit: 'м²', label: 'общая площадь земли' },
  ];
  const section = { padding: '0 0 128px' };
  const inner = { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 32px' };
  const strip = {
    display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
    borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)',
  };
  const cell = (i) => ({
    padding: '40px 32px 36px',
    borderRight: i < 3 ? '1px solid var(--line)' : 'none',
  });
  const num = { fontSize: 'clamp(72px, 9vw, 130px)', fontWeight: 800, lineHeight: 0.85, letterSpacing: '-0.04em', fontVariantNumeric: 'tabular-nums' };
  const unit = { fontSize: 'clamp(28px, 3vw, 48px)', fontWeight: 800, letterSpacing: '-0.02em', color: 'var(--ash)', marginLeft: 4 };
  const lbl = { marginTop: 16, fontSize: 12, color: 'var(--ash)', textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 600 };

  return (
    <section style={section}>
      <div style={inner}>
        <div style={strip}>
          {items.map((it, i) => (
            <div key={i} style={cell(i)}>
              <div style={num}>
                {it.num}
                {it.suffix && <span style={{color:'var(--accent)'}}>{it.suffix}</span>}
                {it.unit && <span style={unit}>{it.unit}</span>}
              </div>
              <div style={lbl}>{it.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
window.StatStrip = StatStrip;