// Stations — 8 real АЗС + map image + Голубые Пруды note
const Stations = () => {
  const stations = [
    { n: '01', name: 'Гапеева',          city: 'Караганда',              addr: 'ул. Гапеева 13/2',                fuels: 'АИ‑92 · АИ‑95 · ДТ' },
    { n: '02', name: 'Волгодонская',     city: 'Караганда',              addr: 'ул. Волгодонская 120',             fuels: 'АИ‑92 · АИ‑95 · ДТ' },
    { n: '03', name: 'Голубые Пруды',    city: 'Караганда',              addr: 'мкр. Голубые Пруды 19',           fuels: 'АИ‑92 · АИ‑95 · ДТ' },
    { n: '04', name: 'Оазис',            city: 'Караганда',              addr: 'мкр. Оазис 85/1',                 fuels: 'АИ‑92 · АИ‑95 · ДТ' },
    { n: '05', name: '14 мкр.',          city: 'Караганда',              addr: '14 мкр. 7/1',                     fuels: 'АИ‑92 · АИ‑95 · ДТ' },
    { n: '06', name: 'Стройполимер',     city: 'Караганда',              addr: 'уч. кв. 016, уч. 2',              fuels: 'АИ‑92 · АИ‑95 · ДТ' },
    { n: '07', name: 'Кокпекты',         city: 'Бухар-Жырауский р-н',   addr: 'с. Кокпекты, ул. Северная 40',   fuels: 'АИ‑92 · АИ‑95 · ДТ' },
    { n: '08', name: 'Коктас',           city: 'Каркаралинский р-н',     addr: 'с. Коктас, ул. Гагарина 76',     fuels: 'АИ‑92 · АИ‑95 · ДТ' },
  ];

  const section = { padding: '128px 0', background: 'var(--bone)' };
  const inner = { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 32px' };
  const accentRule = { display: 'block', width: 48, height: 3, background: 'var(--accent)', marginBottom: 24 };
  const h2 = { fontSize: 'clamp(44px, 5vw, 72px)', fontWeight: 700, lineHeight: 1.0, letterSpacing: '-0.02em', margin: 0, textWrap: 'balance' };

  const mapWrap = {
    width: '100%', marginBottom: 64, overflow: 'hidden',
    borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)',
    minHeight: 600,
  };
  const table = { width: '100%', borderTop: '1px solid var(--line)', borderCollapse: 'collapse' };
  const row = { borderBottom: '1px solid var(--line)' };
  const tdN    = { padding: '20px 16px 20px 0', fontSize: 13, fontWeight: 600, color: 'var(--ash)', width: 52, fontVariantNumeric: 'tabular-nums', verticalAlign: 'top' };
  const tdName = { padding: '20px 16px', fontSize: 20, fontWeight: 700, letterSpacing: '-0.01em', verticalAlign: 'top', width: 220 };
  const tdCity = { padding: '20px 16px', fontSize: 15, color: 'var(--ash)', verticalAlign: 'top', width: 240 };
  const tdAddr = { padding: '20px 16px', fontSize: 17, lineHeight: 1.4, verticalAlign: 'top' };
  const tdHours= { padding: '20px 16px', fontSize: 14, fontWeight: 600, color: 'var(--ink)', verticalAlign: 'top', whiteSpace: 'nowrap', width: 80 };
  const tdFuel = { padding: '20px 0 20px 16px', fontSize: 13, color: 'var(--ash)', verticalAlign: 'top', whiteSpace: 'nowrap' };

  const note = {
    marginTop: 32, padding: '20px 24px', borderLeft: '3px solid var(--accent)', background: 'var(--paper)',
    fontSize: 15, lineHeight: 1.55, color: 'var(--ink)',
  };

  return (
    <section id="stations" style={section}>
      <div style={inner}>
        <div style={{ marginBottom: 56 }}>
          <span style={accentRule}></span>
          <p style={{ fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--ash)', margin: 0 }}>СЕТЬ АЗС</p>
          <h2 style={{ ...h2, marginTop: 24 }}>Восемь станций.<br/>Один стандарт.</h2>
        </div>

        <div style={mapWrap}>
          <img
            src="assets/photos/stations-map.png"
            alt="Карта АЗС PETROL"
            style={{ width: '100%', display: 'block', minHeight: 600, objectFit: 'contain', objectPosition: 'center', background: '#f5f0eb' }}
          />
        </div>

        <table style={table}>
          <tbody>
            {stations.map((s, i) => (
              <tr key={i} style={row}>
                <td style={tdN}>{s.n}</td>
                <td style={tdName}>{s.name}</td>
                <td style={tdCity}>{s.city}</td>
                <td style={tdAddr}>{s.addr}</td>
                <td style={tdHours}>24/7</td>
                <td style={tdFuel}>{s.fuels}</td>
              </tr>
            ))}
          </tbody>
        </table>

        <div style={note}>
          <strong>Голубые Пруды</strong> — единственная АЗС в Караганде с собственным цехом изготовления сэндвичей. Свежая еда готовится на месте.
        </div>
      </div>
    </section>
  );
};
window.Stations = Stations;