// Quality — dark section with нефтебаза photo bg + overlay 80%
const Quality = () => {
  const section = {
    position: 'relative', color: 'var(--paper)', padding: '160px 0 128px', overflow: 'hidden',
  };
  const photoBg = {
    position: 'absolute', inset: 0,
    backgroundImage: 'url(assets/photos/quality-depot.jpg)',
    backgroundSize: 'cover', backgroundPosition: 'center',
    zIndex: 0,
  };
  const overlay = { position: 'absolute', inset: 0, background: 'rgba(10,10,10,0.80)', zIndex: 1 };
  const inner = { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 2 };
  const eyebrow = { fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'rgba(255,255,255,0.6)', margin: 0 };
  const h2 = { fontSize: 'clamp(56px, 7vw, 96px)', fontWeight: 700, lineHeight: 1.0, letterSpacing: '-0.02em', margin: '24px 0 0', maxWidth: 1000, textWrap: 'balance' };
  const grid = { display: 'grid', gridTemplateColumns: '7fr 5fr', gap: 64, marginTop: 96, alignItems: 'end' };
  const lead = { fontSize: 22, lineHeight: 1.45, color: 'rgba(255,255,255,0.78)', margin: 0, maxWidth: 540 };

  const stat = { borderTop: '1px solid rgba(255,255,255,0.2)', padding: '20px 0 0' };
  const statNum = { fontSize: 'clamp(140px, 18vw, 220px)', fontWeight: 800, lineHeight: 0.85, letterSpacing: '-0.04em', fontVariantNumeric: 'tabular-nums' };
  const statLabel = { marginTop: 16, fontSize: 14, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 600, maxWidth: 320 };

  return (
    <section id="quality" style={section}>
      <div style={photoBg}></div>
      <div style={overlay}></div>
      <div style={inner}>
        <p style={eyebrow}>КОНТРОЛЬ КАЧЕСТВА</p>
        <h2 style={h2}>Каждая партия топлива проходит лабораторный контроль.</h2>
        <div style={grid}>
          <p style={lead}>
            Проверяем плотность, фракционный состав, содержание серы и октановое число.
            Паспорт качества предоставляем по запросу — частному клиенту или корпоративному.
          </p>
          <div style={stat}>
            <div style={statNum}>100<span style={{color:'var(--accent)'}}>%</span></div>
            <div style={statLabel}>Партий с лабораторным паспортом качества</div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.Quality = Quality;