// About — two-column section.
const About = () => {
  const section = { padding: '128px 0', background: 'var(--bone)' };
  const inner = { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 32px' };
  const grid = { display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 96, alignItems: 'start' };
  const eyebrow = { fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--ash)', margin: 0 };
  const accentRule = { display: 'block', width: 48, height: 3, background: 'var(--accent)', marginBottom: 24 };
  const h2 = { margin: '24px 0 0', fontSize: 'clamp(44px, 5vw, 72px)', fontWeight: 700, lineHeight: 1.0, letterSpacing: '-0.02em', textWrap: 'balance' };
  const p = { fontSize: 17, lineHeight: 1.55, margin: '0 0 24px' };

  return (
    <section id="about" style={section}>
      <div style={inner}>
        <div style={grid}>
          <div>
            <span style={accentRule}></span>
            <p style={eyebrow}>О КОМПАНИИ</p>
            <h2 style={h2}>Работаем с 1999 года, и это не маркетинговая фраза.</h2>
          </div>
          <div>
            <p style={{ ...p, fontSize: 22, lineHeight: 1.45 }}>
              ТОО «Мунай‑Компани» управляет сетью АЗС «PETROL» — восемь станций в Караганде и
              Карагандинской области. Розничный отпуск топлива, корпоративные программы и
              оптовые поставки.
            </p>
            <p style={p}>
              За двадцать семь лет работы мы выстроили инфраструктуру, логистику и контроль
              качества так, чтобы клиент получал на каждой станции одно и то же топливо —
              без сюрпризов и без сезонных «приключений».
            </p>
            <p style={p}>
              Сегодня в сети ежедневно заправляются частные автомобилисты Караганды,
              корпоративные автопарки региона и подрядчики промышленных площадок.
            </p>
            <a href="#" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 16, fontSize: 15, fontWeight: 500, color: 'var(--ink)', borderBottom: '1px solid var(--ink)', paddingBottom: 2 }}>
              Подробнее о компании <span>→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};
window.About = About;