// Hero — full-bleed photo background with overlay, white text
const Hero = () => {
  const section = { position: 'relative', padding: '96px 0 128px', overflow: 'hidden' };
  const photoBg = {
    position: 'absolute', inset: 0,
    backgroundImage: 'url(assets/photos/hero-station.jpg)',
    backgroundSize: 'cover', backgroundPosition: 'center 40%',
    zIndex: 0,
  };
  const overlay = { position: 'absolute', inset: 0, background: 'rgba(10,10,10,0.55)', 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.65)', margin: 0 };
  const h1 = { margin: '32px 0 0', fontSize: 'clamp(72px, 9vw, 120px)', fontWeight: 800, lineHeight: 0.95, letterSpacing: '-0.03em', color: 'var(--paper)', textWrap: 'balance' };
  const grid = { display: 'grid', gridTemplateColumns: '7fr 5fr', gap: 24, alignItems: 'end', marginTop: 64 };
  const lead = { fontSize: 22, lineHeight: 1.45, color: 'rgba(255,255,255,0.82)', maxWidth: 540, margin: 0 };
  const cta = { display: 'flex', gap: 12, marginTop: 32 };
  const stat = { borderTop: '1px solid rgba(255,255,255,0.3)', padding: '20px 0 0' };
  const statNum = { fontSize: 96, fontWeight: 800, lineHeight: 0.85, letterSpacing: '-0.04em', fontVariantNumeric: 'tabular-nums', color: 'var(--paper)' };
  const statLabel = { marginTop: 8, fontSize: 12, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 600 };

  return (
    <section style={section}>
      <div style={photoBg}></div>
      <div style={overlay}></div>
      <div style={inner}>
        <p style={eyebrow}>АЗС · КАРАГАНДА · С 1999</p>
        <h1 style={h1}>Заправляем<br/>с 1999 года.</h1>
        <div style={grid}>
          <div>
            <p style={lead}>
              Сеть из восьми автозаправочных станций в Караганде и Карагандинской области.
              Розница, топливные карты, оптовые поставки.
            </p>
            <div style={cta}>
              <button className="petrol-btn petrol-btn--primary">Связаться с нами <span>→</span></button>
              <button className="petrol-btn petrol-btn--ghost">Все услуги</button>
            </div>
          </div>
          <div style={stat}>
            <div style={statNum}>8<span style={{color:'var(--accent)'}}>.</span></div>
            <div style={statLabel}>действующих АЗС</div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.Hero = Hero;