// Services — 4 cards: paper, bone, ink, paper.
const Services = () => {
  const items = [
    { num: '01', title: 'Розничный отпуск', desc: 'АИ‑92, АИ‑95, летнее и зимнее дизельное топливо. Восемь станций — одинаковое качество.', bg: 'paper' },
    { num: '02', title: 'Топливные карты', desc: 'Один договор — все станции сети. Расчёт безналичный, отчётность ежемесячно.', bg: 'bone' },
    { num: '03', title: 'Оптовые поставки', desc: 'Бензин и ДТ для автопарков, подрядчиков, промышленных площадок. Доставка бензовозом.', bg: 'ink' },
    { num: '04', title: 'Контроль качества', desc: 'Лабораторные пробы каждой партии. Паспорт качества — по запросу клиента.', bg: 'paper' },
  ];
  const section = { padding: '128px 0' };
  const inner = { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 32px' };
  const head = { display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 64 };
  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 grid = { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, border: '1px solid var(--line)' };

  const cardBase = { padding: '48px 40px 40px', minHeight: 340, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' };
  const styleByBg = {
    paper: { background: 'var(--paper)', color: 'var(--ink)' },
    bone:  { background: 'var(--bone)',  color: 'var(--ink)' },
    ink:   { background: 'var(--ink)',   color: 'var(--paper)' },
  };
  const numStyle = (bg) => ({ fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.14em', color: bg === 'ink' ? 'rgba(255,255,255,0.55)' : 'var(--ash)' });
  const titleStyle = { marginTop: 24, fontSize: 36, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.02em', textWrap: 'balance' };
  const descStyle = (bg) => ({ marginTop: 16, fontSize: 17, lineHeight: 1.5, color: bg === 'ink' ? 'rgba(255,255,255,0.72)' : 'var(--ash)', maxWidth: 420 });
  const linkStyle = (bg) => ({ fontSize: 14, fontWeight: 500, color: bg === 'ink' ? 'var(--paper)' : 'var(--ink)' });

  // borders to keep hairlines clean within the grid
  const cellBorder = (i) => {
    const s = {};
    if (i % 2 === 0) s.borderRight = '1px solid var(--line)';
    if (i < 2)       s.borderBottom = '1px solid var(--line)';
    return s;
  };

  return (
    <section id="services" style={section}>
      <div style={inner}>
        <div style={head}>
          <div>
            <span style={accentRule}></span>
            <p style={{ fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--ash)', margin: 0 }}>УСЛУГИ</p>
            <h2 style={h2}>Четыре направления.<br/>Один договор.</h2>
          </div>
        </div>
        <div style={grid}>
          {items.map((it, i) => (
            <article key={i} style={{ ...cardBase, ...styleByBg[it.bg], ...cellBorder(i) }}>
              <div>
                <span style={numStyle(it.bg)}>{it.num}</span>
                <h3 style={titleStyle}>{it.title}</h3>
                <p style={descStyle(it.bg)}>{it.desc}</p>
              </div>
              <a href="#" style={{ ...linkStyle(it.bg), display: 'inline-flex', alignItems: 'center', gap: 8, borderBottom: `1px solid ${it.bg === 'ink' ? 'var(--paper)' : 'var(--ink)'}`, paddingBottom: 2, alignSelf: 'flex-start', textDecoration: 'none' }}>
                Подробнее <span style={{ color: it.bg === 'ink' ? 'var(--accent)' : 'inherit' }}>→</span>
              </a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Services = Services;