// B2BCallout — updated 4 real features
const B2BCallout = () => {
  const section = { background: 'var(--bone)', padding: '128px 0' };
  const inner = { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 32px' };
  const grid = { display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 96, alignItems: 'start' };

  const accentRule = { display: 'block', width: 48, height: 3, background: 'var(--accent)', marginBottom: 24 };
  const eyebrow = { fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--ash)', margin: 0 };
  const h2 = { fontSize: 'clamp(44px, 5vw, 72px)', fontWeight: 700, lineHeight: 1.0, letterSpacing: '-0.02em', margin: '24px 0 32px', textWrap: 'balance' };
  const lead = { fontSize: 22, lineHeight: 1.45, color: 'var(--ink)', margin: 0, maxWidth: 480 };

  const features = [
    { title: 'Один договор',        text: 'на все 8 станций сети — без отдельных соглашений по точкам.' },
    { title: 'Безналичный расчёт',  text: 'единая ежемесячная отчётность с детализацией по картам и литражу.' },
    { title: 'Лимиты',              text: 'по сотруднику, автомобилю и типу топлива — гибко настраиваются.' },
    { title: 'PIN-код и считыватель', text: 'физическая защита от удалённого списания средств.' },
  ];

  return (
    <section id="b2b" style={section}>
      <div style={inner}>
        <div style={grid}>
          <div>
            <span style={accentRule}></span>
            <p style={eyebrow}>БИЗНЕСУ</p>
            <h2 style={h2}>Топливные карты PETROL.</h2>
            <p style={lead}>
              Корпоративным клиентам — единый договор на сеть, безнал и прозрачная отчётность.
              Расскажем условия за один разговор.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 40 }}>
              <button className="petrol-btn petrol-btn--primary">Заказать звонок <span>→</span></button>
              <button className="petrol-btn petrol-btn--secondary">Скачать оферту</button>
            </div>
          </div>
          <ul style={{ listStyle: 'none', margin: 0, padding: 0, borderTop: '1px solid var(--line)' }}>
            {features.map((f, i) => (
              <li key={i} style={{ display: 'grid', gridTemplateColumns: '40px 240px 1fr', gap: 24, alignItems: 'baseline', padding: '28px 0', borderBottom: '1px solid var(--line)' }}>
                <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--ash)', fontVariantNumeric: 'tabular-nums' }}>{String(i + 1).padStart(2, '0')}</span>
                <span style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em' }}>{f.title}</span>
                <span style={{ fontSize: 17, color: 'var(--ash)', lineHeight: 1.5 }}>{f.text}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
};
window.B2BCallout = B2BCallout;