/* global React */
const { useState, useEffect } = React;

const Arrow = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
    <path d="M3 13L13 3M13 3H5M13 3V11" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

/* ============== Brand SVG illustrations (placeholder photos) ============== */
const Illu = ({ kind, ratio = '4/3' }) => {
  const G = 'var(--green)';
  const P = 'var(--purple)';
  const Y = 'var(--yellow)';
  const ink = 'var(--ink)';
  const cream = 'var(--cream)';
  const stroke = 'rgba(0,0,0,0.12)';

  // Common: tonemap background grid + scanline
  const bg = (
    <>
      <defs>
        <pattern id={`grid-${kind}`} width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(0,0,0,0.04)" strokeWidth="1"/>
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill={`url(#grid-${kind})`} />
    </>
  );

  let content = null;
  if (kind === 'agzs') {
    // hero photo replacement: АЗС в перспективе ночью
    content = (
      <svg viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice" style={{width: '100%', height: '100%', display: 'block'}}>
        <rect width="800" height="600" fill="#1a3a1f"/>
        <rect width="800" height="280" fill="#0f2614"/>
        {/* horizon glow */}
        <ellipse cx="400" cy="290" rx="500" ry="40" fill="#76689A" opacity="0.35"/>
        {/* canopy */}
        <rect x="120" y="170" width="560" height="50" fill="#61993B"/>
        <rect x="120" y="220" width="560" height="6" fill="#4d7b2e"/>
        {/* canopy posts */}
        <rect x="170" y="220" width="14" height="220" fill="#2a3a2a"/>
        <rect x="616" y="220" width="14" height="220" fill="#2a3a2a"/>
        {/* logo on canopy */}
        <text x="400" y="205" textAnchor="middle" fontFamily="Comfortaa, sans-serif" fontWeight="700" fontSize="26" fill="#F3E03B" letterSpacing="3">СУГОРИЯ</text>
        {/* pumps */}
        <g transform="translate(280,320)">
          <rect width="60" height="120" rx="4" fill="#e8e4d8"/>
          <rect x="8" y="10" width="44" height="50" fill="#1a3a1f"/>
          <rect x="14" y="18" width="32" height="6" fill="#F3E03B"/>
          <rect x="14" y="30" width="20" height="4" fill="#76689A"/>
          <circle cx="30" cy="80" r="6" fill="#61993B"/>
        </g>
        <g transform="translate(460,320)">
          <rect width="60" height="120" rx="4" fill="#e8e4d8"/>
          <rect x="8" y="10" width="44" height="50" fill="#1a3a1f"/>
          <rect x="14" y="18" width="32" height="6" fill="#F3E03B"/>
          <rect x="14" y="30" width="20" height="4" fill="#76689A"/>
          <circle cx="30" cy="80" r="6" fill="#61993B"/>
        </g>
        {/* ground */}
        <rect y="440" width="800" height="160" fill="#0a1a0d"/>
        <rect y="440" width="800" height="2" fill="#61993B" opacity="0.5"/>
        {/* lane markings */}
        <g fill="#F3E03B" opacity="0.7">
          <rect x="60" y="490" width="40" height="6"/>
          <rect x="140" y="490" width="40" height="6"/>
          <rect x="220" y="490" width="40" height="6"/>
          <rect x="620" y="490" width="40" height="6"/>
          <rect x="700" y="490" width="40" height="6"/>
        </g>
        {/* car silhouette */}
        <g transform="translate(560,400)">
          <rect width="120" height="36" rx="10" fill="#76689A"/>
          <rect x="20" y="-14" width="80" height="20" rx="6" fill="#76689A"/>
          <circle cx="28" cy="40" r="10" fill="#1a1a1a"/>
          <circle cx="92" cy="40" r="10" fill="#1a1a1a"/>
        </g>
        {/* light haze */}
        <rect width="800" height="600" fill="url(#haze)" opacity="0.2"/>
        <defs>
          <linearGradient id="haze" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#76689A" stopOpacity="0.4"/>
            <stop offset="1" stopColor="#000" stopOpacity="0"/>
          </linearGradient>
        </defs>
      </svg>
    );
  } else if (kind === 'pump') {
    content = (
      <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" style={{width: '100%', height: '100%', display: 'block'}}>
        <rect width="400" height="300" fill={cream}/>
        {bg}
        {/* pump */}
        <g transform="translate(140,60)">
          <rect width="120" height="180" rx="8" fill={G}/>
          <rect x="14" y="20" width="92" height="60" fill={ink}/>
          <rect x="22" y="32" width="76" height="10" fill={Y}/>
          <rect x="22" y="50" width="50" height="6" fill="#fff" opacity="0.7"/>
          <rect x="22" y="62" width="36" height="6" fill="#fff" opacity="0.5"/>
          <rect x="40" y="100" width="40" height="60" fill={ink}/>
          <circle cx="60" cy="170" r="6" fill={Y}/>
        </g>
        {/* hose */}
        <path d="M260 130 Q 320 140 320 200 L 320 260" stroke={ink} strokeWidth="6" fill="none" strokeLinecap="round"/>
        <rect x="305" y="255" width="30" height="20" rx="3" fill={P}/>
        {/* ground */}
        <rect y="240" width="400" height="60" fill={ink} opacity="0.08"/>
        <rect y="240" width="400" height="2" fill={G}/>
      </svg>
    );
  } else if (kind === 'tanker') {
    content = (
      <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" style={{width: '100%', height: '100%', display: 'block'}}>
        <rect width="400" height="300" fill={cream}/>
        {bg}
        {/* truck cab */}
        <g transform="translate(40,140)">
          <rect width="80" height="80" rx="6" fill={P}/>
          <rect x="10" y="14" width="50" height="34" fill="#fff" opacity="0.85"/>
          <rect x="14" y="20" width="20" height="22" fill={P} opacity="0.4"/>
          <circle cx="20" cy="90" r="14" fill={ink}/>
          <circle cx="20" cy="90" r="6" fill="#888"/>
        </g>
        {/* tank */}
        <g transform="translate(120,150)">
          <rect width="240" height="70" rx="35" fill={G}/>
          <rect x="20" y="28" width="200" height="14" fill="#fff" opacity="0.25"/>
          <text x="120" y="46" textAnchor="middle" fontFamily="Comfortaa" fontWeight="700" fontSize="20" fill="#fff" letterSpacing="3">LPG</text>
          <circle cx="120" cy="80" r="14" fill={ink}/>
          <circle cx="120" cy="80" r="6" fill="#888"/>
          <circle cx="200" cy="80" r="14" fill={ink}/>
          <circle cx="200" cy="80" r="6" fill="#888"/>
        </g>
        <rect y="225" width="400" height="2" fill={ink} opacity="0.2"/>
        <rect y="227" width="400" height="73" fill={ink} opacity="0.05"/>
      </svg>
    );
  } else if (kind === 'tank') {
    // газгольдер horizontal
    content = (
      <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" style={{width: '100%', height: '100%', display: 'block'}}>
        <rect width="400" height="300" fill={cream}/>
        {bg}
        {/* house in background */}
        <g transform="translate(40,80)" opacity="0.6">
          <polygon points="0,40 60,0 120,40 120,120 0,120" fill={P} opacity="0.3"/>
          <rect x="50" y="70" width="20" height="50" fill={P} opacity="0.5"/>
        </g>
        {/* gazgolder */}
        <g transform="translate(80,170)">
          <rect width="240" height="80" rx="40" fill={G}/>
          <ellipse cx="40" cy="40" rx="22" ry="40" fill={G}/>
          <ellipse cx="200" cy="40" rx="22" ry="40" fill={G}/>
          <rect x="30" y="30" width="180" height="6" fill="#fff" opacity="0.3"/>
          <circle cx="120" cy="20" r="8" fill={Y}/>
          <rect x="116" y="0" width="8" height="20" fill={ink}/>
        </g>
        {/* ground */}
        <rect y="248" width="400" height="2" fill={G}/>
        <rect y="250" width="400" height="50" fill={ink} opacity="0.06"/>
        {/* grass tufts */}
        <g fill={G} opacity="0.7">
          <path d="M20 250 l3 -10 l3 10 z"/>
          <path d="M340 250 l3 -10 l3 10 z"/>
          <path d="M360 250 l3 -8 l3 8 z"/>
        </g>
      </svg>
    );
  } else if (kind === 'cylinder') {
    content = (
      <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" style={{width: '100%', height: '100%', display: 'block'}}>
        <rect width="400" height="300" fill={cream}/>
        {bg}
        {[80, 180, 280].map((x, i) => (
          <g key={i} transform={`translate(${x},60)`}>
            <rect width="60" height="180" rx="8" fill={i === 1 ? P : G}/>
            <rect y="0" width="60" height="14" fill={ink}/>
            <rect x="20" y="-20" width="20" height="22" fill={ink}/>
            <rect x="26" y="-26" width="8" height="6" fill="#888"/>
            <rect y="40" width="60" height="6" fill="#fff" opacity="0.3"/>
            <text x="30" y="115" textAnchor="middle" fontFamily="Comfortaa" fontWeight="700" fontSize="14" fill="#fff">{['27','50','79'][i]}л</text>
          </g>
        ))}
        <rect y="240" width="400" height="2" fill={ink} opacity="0.2"/>
      </svg>
    );
  } else if (kind === 'charity') {
    content = (
      <svg viewBox="0 0 600 700" preserveAspectRatio="xMidYMid slice" style={{width: '100%', height: '100%', display: 'block'}}>
        <rect width="600" height="700" fill={G}/>
        {/* sun */}
        <circle cx="450" cy="180" r="120" fill={Y} opacity="0.95"/>
        <circle cx="450" cy="180" r="80" fill={Y}/>
        {/* hills */}
        <path d="M0 480 Q 150 380 300 460 T 600 440 L 600 700 L 0 700 Z" fill="#4d7b2e"/>
        <path d="M0 540 Q 200 460 400 520 T 600 510 L 600 700 L 0 700 Z" fill="#3a5f23"/>
        {/* leaf big */}
        <g transform="translate(120,180) rotate(-20)">
          <path d="M0 0 Q 60 -120 180 -60 Q 140 80 0 0 Z" fill="#fff" opacity="0.9"/>
          <path d="M0 0 Q 90 -90 180 -60" stroke={G} strokeWidth="3" fill="none"/>
        </g>
        {/* small leaves */}
        <g transform="translate(380,420)" fill={cream} opacity="0.9">
          <ellipse cx="0" cy="0" rx="22" ry="10" transform="rotate(-30)"/>
          <ellipse cx="40" cy="20" rx="18" ry="8" transform="rotate(20 40 20)"/>
        </g>
        {/* path of dots */}
        <g fill={Y}>
          {[0,1,2,3,4,5,6].map(i => (
            <circle key={i} cx={80 + i*70} cy={620 - Math.sin(i)*30} r={6}/>
          ))}
        </g>
      </svg>
    );
  }

  return (
    <div style={{width: '100%', height: '100%', position: 'relative', overflow: 'hidden', background: 'var(--cream)'}}>
      {content}
    </div>
  );
};

const PhoneIcon = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z"/>
  </svg>
);

/* ============== NAV ============== */
const Nav = () => {
  return (
    <nav className="nav">
      <div className="nav__logo">
        <img src="sugoria-redesign/logo.png" alt="Сугория" />
      </div>
      <ul className="nav__links">
        <li><a href="#services">Услуги</a></li>
        <li><a href="#agzs">АГЗС</a></li>
        <li><a href="#b2b">Опт</a></li>
        <li><a href="#loyalty">Воздух</a></li>
        <li><a href="#company">Компания</a></li>
        <li><a href="#contacts">Контакты</a></li>
      </ul>
      <div className="nav__cta">
        <a href="tel:+73512002636" className="nav__phone">+7 (351) 200-26-36</a>
        <a href="#contacts" className="btn btn--primary" style={{padding: '12px 22px', fontSize: 13}}>
          Связаться
          <Arrow size={14} />
        </a>
      </div>
    </nav>
  );
};

/* ============== HERO ============== */
const Hero = () => (
  <section className="hero container">
    <div className="hero__inner">
      <div className="hero__left">
        <div>
          <div className="eyebrow" style={{marginBottom: 32}}>
            Сжиженный газ · Челябинская область · с 1963
          </div>
          <h1 className="hero__title display">
            Газ, который<br/>
            <span className="green">движет</span> и<br/>
            <span className="underline purple">согревает</span>.
          </h1>
        </div>

        <p className="hero__lead">
          Газонаполнительная станция, 15 АГЗС, опт пропана от&nbsp;5&nbsp;тонн, газгольдеры и&nbsp;баллоны — Сугория закрывает весь цикл работы со&nbsp;сжиженным газом на&nbsp;Южном Урале.
        </p>

        <div className="hero__cta-row">
          <a href="#agzs" className="btn btn--primary">
            Найти ближайшую АГЗС
            <Arrow size={14} />
          </a>
          <a href="#loyalty" className="btn btn--ghost">
            Программа «Воздух» <span style={{color: 'var(--green)'}}>· до 7%</span>
          </a>
        </div>

        <div className="hero__stats">
          <div>
            <div className="hero__stat-num">60<span className="small">+</span></div>
            <span className="hero__stat-label">лет на рынке</span>
          </div>
          <div>
            <div className="hero__stat-num">15</div>
            <span className="hero__stat-label">АГЗС в&nbsp;сети</span>
          </div>
          <div>
            <div className="hero__stat-num">100<span className="small">+</span></div>
            <span className="hero__stat-label">оптовых клиентов</span>
          </div>
        </div>
      </div>

      <div className="hero__visual">
        <div className="hero__visual-photo">
          <Illu kind="agzs" />
        </div>
        <div className="hero__visual-content">
          <div className="hero__visual-top">
            <span className="tag tag--white-line">
              <span className="live-dot"></span>
              Сеть онлайн
            </span>
            <span className="tag tag--yellow">
              <span className="dot" style={{background: 'var(--ink)'}}></span>
              Эко-топливо
            </span>
          </div>
          <div className="hero__visual-bottom">
            <div>
              <div style={{fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.15em', textTransform: 'uppercase', opacity: 0.8}}>
                Кадр / 04:32 МСК
              </div>
              <div className="display" style={{fontSize: 28, marginTop: 8, fontWeight: 700, letterSpacing: '0.03em'}}>
                Озёрск, Челябинская
              </div>
            </div>
            <a href="#agzs" className="btn" style={{background: 'rgba(255,255,255,0.18)', color: 'white', backdropFilter: 'blur(6px)', border: '1px solid rgba(255,255,255,0.35)'}}>
              Все 15 АГЗС
              <Arrow size={14} />
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ============== TICKER ============== */
const Ticker = () => {
  const items = ['Пропан-бутан', 'Метан', 'Газгольдеры', 'Баллоны', 'Опт от 5 тонн', 'Программа Воздух', '15 АГЗС', 'Челябинская обл.'];
  const renderRow = () => items.map((it, i) => (
    <React.Fragment key={i}>
      <span className={i % 2 ? 'purple' : 'green'}>{it}</span>
      <span className="star"></span>
    </React.Fragment>
  ));
  return (
    <div className="ticker">
      <div className="ticker-track">
        <span>{renderRow()}</span>
        <span aria-hidden>{renderRow()}</span>
      </div>
    </div>
  );
};

/* ============== DIRECTIONS (4 услуги) ============== */
const Directions = () => {
  const dirs = [
    { num: '01', title: 'АГЗС', desc: 'Заправка пропан-бутаном и метаном на 15 станциях по Челябинской области.', kind: 'pump' },
    { num: '02', title: 'Опт пропана', desc: 'Поставки сжиженного газа от 5 тонн юридическим лицам и промышленности.', kind: 'tanker' },
    { num: '03', title: 'Газгольдеры', desc: 'Автономная газификация частных домов, посёлков, предприятий под ключ.', kind: 'tank' },
    { num: '04', title: 'Баллоны', desc: 'Заправка, обмен, доставка баллонов 27, 50 и 79 литров.', kind: 'cylinder' },
  ];
  return (
    <section className="section container" id="services">
      <div className="sec-head">
        <h2 className="sec-head__title display">
          Четыре направления.<br/>
          <span className="green">Один газ.</span>
        </h2>
        <p className="sec-head__lead">
          Сугория закрывает весь цикл работы со&nbsp;сжиженным газом — от&nbsp;автозаправки в&nbsp;три часа ночи до&nbsp;проектирования автономной газификации посёлка.
        </p>
      </div>
      <div className="dirs">
        {dirs.map((d, i) => (
          <div key={i} className="dir">
            <div className="dir__num">/ {d.num}</div>
            <div className="dir__arrow"><Arrow size={16} /></div>
            <div className="dir__img"><Illu kind={d.kind} /></div>
            <h3 className="dir__title">{d.title}</h3>
            <p className="dir__desc">{d.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

/* ============== AGZS / MAP ============== */
const STATIONS = [
  { city: 'Озёрск', addr: 'ул. Челябинская, 28', svc: ['П'], x: 64, y: 26 },
  { city: 'Озёрск', addr: 'ул. Кыштымская, 10', svc: ['П', 'М'], x: 62, y: 30 },
  { city: 'Озёрск', addr: 'Озёрское шоссе, 22', svc: ['П'], x: 66, y: 28 },
  { city: 'Кыштым', addr: 'ул. Каслинская, 5', svc: ['П', 'М'], x: 56, y: 36 },
  { city: 'Кыштым', addr: 'ул. Республики, 51', svc: ['П'], x: 54, y: 38 },
  { city: 'Касли', addr: 'ул. Ленина, 18', svc: ['П'], x: 50, y: 44 },
  { city: 'Снежинск', addr: 'ул. Транспортная, 7', svc: ['П', 'М'], x: 70, y: 34 },
  { city: 'Челябинск', addr: 'Свердловский тракт, 1', svc: ['П', 'М'], x: 44, y: 62 },
  { city: 'Челябинск', addr: 'ул. Бажова, 119', svc: ['П'], x: 46, y: 66 },
  { city: 'Челябинск', addr: 'ул. Героев Танкограда, 80', svc: ['П', 'М'], x: 48, y: 70 },
  { city: 'Копейск', addr: 'пр. Победы, 24', svc: ['П'], x: 54, y: 70 },
  { city: 'Миасс', addr: 'Тургоякское шоссе, 3', svc: ['П', 'М'], x: 28, y: 56 },
  { city: 'Златоуст', addr: 'пр. Гагарина, 11', svc: ['П'], x: 20, y: 50 },
  { city: 'Аша', addr: 'ул. Кирова, 64', svc: ['П'], x: 10, y: 44 },
  { city: 'Сатка', addr: 'ул. Молодёжная, 22', svc: ['П'], x: 16, y: 54 },
];

const AgzsSection = () => {
  const [active, setActive] = useState(1);
  const cur = STATIONS[active];
  return (
    <section className="section container" id="agzs">
      <div className="sec-head">
        <h2 className="sec-head__title display">
          15 станций.<br/>
          <span className="purple">Радиус — Южный Урал.</span>
        </h2>
        <p className="sec-head__lead">
          В&nbsp;2000&nbsp;году мы&nbsp;первыми построили АГЗС в&nbsp;Челябинской области. В&nbsp;2020&nbsp;— первую полностью автоматическую на&nbsp;Урале.
        </p>
      </div>

      <div className="agzs-block">
        <div className="agzs-map">
          <div className="map-canvas">
            <div className="map-pattern"></div>
            <div className="map-grid"></div>
          </div>
          <span className="map-corner" style={{top: 24, left: 24}}>54.7° N · 60.3° E</span>
          <span className="map-corner" style={{top: 24, right: 24}}>Челябинская область</span>
          <span className="map-corner" style={{bottom: 24, right: 24}}>● Сеть онлайн</span>
          {STATIONS.map((s, i) => (
            <div
              key={i}
              className={`map-pin ${active === i ? 'active' : ''}`}
              style={{ left: `${s.x}%`, top: `${s.y}%` }}
              onClick={() => setActive(i)}
              title={`${s.city} — ${s.addr}`}
            />
          ))}
          <div className="map-overlay">
            <div className="map-overlay__city">{cur.city}</div>
            <div className="map-overlay__addr">{cur.addr}</div>
            <div className="map-overlay__svc">
              {cur.svc.includes('П') && <span className="svc-pill">Пропан</span>}
              {cur.svc.includes('М') && <span className="svc-pill metan">Метан</span>}
            </div>
          </div>
        </div>
        <div className="agzs-list">
          <div className="agzs-list__head">
            <span className="agzs-list__title">Все станции</span>
            <span style={{fontSize: 12, color: 'var(--green)', fontWeight: 600, letterSpacing: '0.1em'}}>{STATIONS.length} ТОЧЕК</span>
          </div>
          {STATIONS.map((s, i) => (
            <div key={i} className={`agzs-row ${active === i ? 'active' : ''}`} onClick={() => setActive(i)}>
              <div className="agzs-row__city">{s.city}</div>
              <div className="agzs-row__addr">{s.addr}</div>
              <div className="agzs-row__svc">
                {s.svc.includes('П') && <span className="svc-pill">П</span>}
                {s.svc.includes('М') && <span className="svc-pill metan">М</span>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============== B2B ============== */
const B2B = () => (
  <section className="section container" id="b2b">
    <div className="sec-head">
      <h2 className="sec-head__title display">
        Опт <span className="green">от&nbsp;5&nbsp;тонн</span><br/>
        для&nbsp;тех, кто считает.
      </h2>
      <p className="sec-head__lead">
        100+ постоянных оптовых клиентов: промышленность, сельское хозяйство, ЖКХ, стройка. Свой парк газовозов, своя газонаполнительная станция с&nbsp;1963&nbsp;года.
      </p>
    </div>

    <div className="b2b">
      <div className="b2b__hero">
        <div className="eyebrow" style={{color: 'var(--yellow)'}}>
          Оптовая поставка
        </div>
        <h3 className="display">
          Свой парк<br/>
          газовозов, <span className="yellow">своя</span><br/>
          станция с&nbsp;1963.
        </h3>
        <p>
          Прямые поставки с&nbsp;нашей ГНС в&nbsp;Озёрске, без посредников. Контракты от&nbsp;5&nbsp;тонн, индивидуальные графики отгрузки, гибкие условия оплаты.
        </p>
        <div className="b2b__hero-foot">
          <a href="#contacts" className="btn btn--yellow">
            Запросить расчёт
            <Arrow size={14} />
          </a>
          <div style={{fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.1em', opacity: 0.85}}>
            gazoiltopgroup@mail.ru
          </div>
        </div>
        <div className="b2b__hero-bignum">100+</div>
      </div>

      <div className="b2b__cards">
        <div className="b2b__card">
          <div className="b2b__card-num">5т</div>
          <div className="b2b__card-title">Минимальная отгрузка</div>
          <p className="b2b__card-desc">От пяти тонн пропан-бутана. Доставка автоцистернами по&nbsp;всему Уралу.</p>
        </div>
        <div className="b2b__card">
          <div className="b2b__card-num">24/7</div>
          <div className="b2b__card-title">Круглосуточная отгрузка</div>
          <p className="b2b__card-desc">ГНС в&nbsp;Озёрске работает без выходных. Отгрузка по&nbsp;графику клиента.</p>
        </div>
      </div>
    </div>
  </section>
);

/* ============== ECO BANNER ============== */
const EcoBanner = () => (
  <section className="section section--tight container">
    <div className="eco-banner">
      <h3 className="eco-banner__title display">
        Выбирай <em>экологичное</em> топливо
      </h3>
      <div className="eco-banner__side eco-banner__side--bad">
        <div className="eco-banner__label" style={{opacity: 0.55}}>Бензин</div>
        <div className="eco-banner__sub">Сажа, выбросы, дороже километр пробега.</div>
      </div>
      <div className="eco-banner__center"></div>
      <div className="eco-banner__side eco-banner__side--good">
        <div className="eco-banner__label">Газ</div>
        <div className="eco-banner__sub">Чище, экономичнее, до&nbsp;40% дешевле бензина.</div>
      </div>
      <a href="#loyalty" className="eco-banner__cta btn btn--yellow">
        Перейти на газ — скидка 15% на 3 года
        <Arrow size={14} />
      </a>
    </div>
  </section>
);

/* ============== BIG STAT ============== */
const BigStat = () => (
  <section className="section section--tight container">
    <div className="bigstat">
      <div className="bigstat__num display">1963</div>
      <div className="bigstat__cap">Год основания газонаполнительной станции в&nbsp;Озёрске</div>
    </div>
  </section>
);

/* ============== LOYALTY ============== */
const Loyalty = () => {
  const tiers = [
    { pct: '3%', name: 'Старт', cond: 'до 500 литров заправок в месяц' },
    { pct: '5%', name: 'Постоянный', cond: 'от 500 до 1500 литров в месяц' },
    { pct: '7%', name: 'Премиум', cond: 'свыше 1500 литров в месяц' },
  ];
  return (
    <section className="section container" id="loyalty">
      <div className="sec-head">
        <h2 className="sec-head__title display">
          Программа <span className="green">«Воздух».</span><br/>
          Чем больше — тем больше.
        </h2>
        <p className="sec-head__lead">
          Карта лояльности для частных водителей и&nbsp;корпоративных парков. Возврат от&nbsp;каждой заправки баллами на&nbsp;следующий бак — на&nbsp;любой АГЗС Сугории.
        </p>
      </div>

      <div className="loyalty">
        <div className="loyalty__card">
          <div className="loyalty__card-yellow"></div>
          <div className="loyalty__card-blob"></div>
          <div className="loyalty__card-head">
            <span>Сугория · Программа лояльности</span>
            <span>SIM-09 / 2025</span>
          </div>
          <div className="loyalty__card-name display">
            Воздух
          </div>
          <div className="loyalty__card-foot">
            <div className="loyalty__chip"></div>
            <div style={{fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.15em'}}>
              7488 ★★★★ ★★★★ 2025
            </div>
          </div>
        </div>

        <div className="loyalty__tiers">
          {tiers.map((t, i) => (
            <div key={i} className="tier">
              <div className="tier__pct display">{t.pct}</div>
              <div>
                <div className="tier__name">{t.name}</div>
                <div className="tier__cond">{t.cond}</div>
              </div>
              <Arrow size={20} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============== COMPANY / TIMELINE ============== */
const Company = () => {
  const milestones = [
    { year: '1963', title: 'Старт ГНС', desc: 'Газонаполнительная станция в&nbsp;Озёрске.' },
    { year: '2000', title: 'Первая АГЗС', desc: 'Первая АГЗС в&nbsp;Челябинской области.' },
    { year: '2010', title: 'Опт 100+', desc: 'Сотый постоянный оптовый клиент.' },
    { year: '2020', title: 'Авто-АГЗС', desc: 'Первая полностью автоматическая на&nbsp;Урале.' },
    { year: '2025', title: 'Сеть 15', desc: '15 станций, программа «Воздух».' },
  ];
  return (
    <section className="section container" id="company">
      <div className="sec-head">
        <h2 className="sec-head__title display">
          Шестьдесят с&nbsp;лишним <span className="purple">лет</span><br/>
          в&nbsp;газовом деле.
        </h2>
        <p className="sec-head__lead">
          Сугория — наследник газонаполнительной станции 1963&nbsp;года. На&nbsp;этой инфраструктуре выросла одна из&nbsp;крупнейших независимых газовых компаний Урала.
        </p>
      </div>

      <div className="timeline">
        <div className="timeline__line"></div>
        <div className="timeline__row">
          {milestones.map((m, i) => (
            <div key={i} className="tl-item">
              <div className="tl-item__year display">{m.year}</div>
              <div className="tl-item__dot"></div>
              <div className="tl-item__title">{m.title}</div>
              <div className="tl-item__desc" dangerouslySetInnerHTML={{__html: m.desc}}></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============== CHARITY ============== */
const Charity = () => (
  <section className="section container">
    <div className="split">
      <div className="split__visual">
        <Illu kind="charity" />
        <div className="split__visual-overlay">
          <span className="tag tag--yellow" style={{alignSelf: 'flex-start'}}>
            <span className="dot" style={{background: 'var(--ink)'}}></span>
            5+ лет программе
          </span>
          <div className="display" style={{fontSize: 24, fontWeight: 700, letterSpacing: '0.03em'}}>
            Помогаем там, где живём.
          </div>
        </div>
      </div>
      <div className="split__text">
        <div className="eyebrow" style={{color: 'var(--purple)'}}>Благотворительность</div>
        <h3 className="display">
          Помогаем там, <span className="green">где живём</span>:<br/>
          детям, ветеранам, школам.
        </h3>
        <p style={{color: 'var(--ink-dim)', fontSize: 17, lineHeight: 1.55, maxWidth: '50ch'}}>
          Поддержка детских учреждений Челябинской области, ветеранских организаций, школьных программ. Регулярные адресные программы и&nbsp;разовые проекты — без огласки и&nbsp;медийных кампаний.
        </p>
        <ul className="bullet-list">
          <li>Адресная помощь детским домам и&nbsp;интернатам</li>
          <li>Поддержка ветеранов ВОВ и&nbsp;тружеников тыла</li>
          <li>Оснащение школьных кабинетов и&nbsp;спортзалов</li>
          <li>Содействие православным приходам в&nbsp;регионе</li>
        </ul>
      </div>
    </div>
  </section>
);

/* ============== CONTACTS ============== */
const Contacts = () => (
  <section className="section container" id="contacts">
    <div className="sec-head">
      <h2 className="sec-head__title display">
        Связаться <span className="green">с&nbsp;Сугорией.</span>
      </h2>
      <p className="sec-head__lead">
        Звонок диспетчеру, письмо коммерческому отделу или&nbsp;запрос через форму — ответим в&nbsp;течение рабочего дня.
      </p>
    </div>

    <div className="contacts">
      <div className="contact-list">
        <div className="contact-item">
          <span className="contact-item__label">Телефон</span>
          <a href="tel:+73512002636" className="contact-item__value">+7 (351) 200-26-36</a>
        </div>
        <div className="contact-item">
          <span className="contact-item__label">E-mail</span>
          <a href="mailto:gazoiltopgroup@mail.ru" className="contact-item__value">gazoiltopgroup@mail.ru</a>
        </div>
        <div className="contact-item">
          <span className="contact-item__label">Офис</span>
          <span className="contact-item__value">
            Челябинская область,<br/>
            г.&nbsp;Озёрск, Озёрское шоссе, 22, оф.&nbsp;1
          </span>
        </div>
        <div className="contact-item">
          <span className="contact-item__label">Режим</span>
          <span className="contact-item__value">
            Офис: пн–пт 9:00–18:00<br/>
            <span style={{color: 'var(--green)', fontSize: '0.7em'}}>● АГЗС: 24 / 7 / 365</span>
          </span>
        </div>
      </div>

      <form className="contact-form" onSubmit={(e) => e.preventDefault()}>
        <h4 className="display">Оставьте заявку</h4>
        <p className="small" style={{marginBottom: 4}}>Перезвоним в&nbsp;течение часа в&nbsp;рабочее время</p>
        <input className="input" placeholder="Как к вам обращаться" />
        <input className="input" placeholder="Телефон" />
        <input className="input" placeholder="E-mail (по желанию)" />
        <select className="input" defaultValue="">
          <option value="" disabled>Тема обращения</option>
          <option>Опт пропан-бутана</option>
          <option>Газгольдеры — газификация</option>
          <option>Заправка баллонов</option>
          <option>Программа «Воздух»</option>
          <option>Другое</option>
        </select>
        <textarea className="input" rows="3" placeholder="Комментарий"></textarea>
        <button type="submit" className="btn btn--primary" style={{justifyContent: 'center', marginTop: 4}}>
          Отправить заявку
          <Arrow size={14} />
        </button>
        <p className="small" style={{textAlign: 'center', fontSize: 12}}>
          Нажимая кнопку, вы&nbsp;соглашаетесь с&nbsp;<a href="#" style={{color: 'var(--green)', textDecoration: 'underline'}}>политикой обработки данных</a>
        </p>
      </form>
    </div>
  </section>
);

/* ============== FOOTER ============== */
const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer__top">
        <div className="footer__col">
          <img src="sugoria-redesign/logo.png" alt="Сугория" style={{height: 48, filter: 'brightness(0) invert(1)', marginBottom: 20}} />
          <p style={{maxWidth: '36ch', fontSize: 14, opacity: 0.9, lineHeight: 1.55}}>
            Газонаполнительная станция работает с&nbsp;1963&nbsp;года. Сеть из&nbsp;15&nbsp;АГЗС, опт пропана, газгольдеры и&nbsp;баллоны.
          </p>
        </div>
        <div className="footer__col">
          <h5>Услуги</h5>
          <ul>
            <li><a href="#agzs">АГЗС</a></li>
            <li><a href="#b2b">Опт</a></li>
            <li><a href="#services">Газгольдеры</a></li>
            <li><a href="#services">Баллоны</a></li>
          </ul>
        </div>
        <div className="footer__col">
          <h5>Компания</h5>
          <ul>
            <li><a href="#company">О нас</a></li>
            <li><a href="#loyalty">Программа «Воздух»</a></li>
            <li><a href="#">Документы</a></li>
            <li><a href="#">Вакансии</a></li>
          </ul>
        </div>
        <div className="footer__col">
          <h5>Контакты</h5>
          <ul>
            <li><a href="tel:+73512002636">+7 (351) 200-26-36</a></li>
            <li><a href="mailto:gazoiltopgroup@mail.ru">gazoiltopgroup@mail.ru</a></li>
            <li>Озёрск, Озёрское ш., 22</li>
          </ul>
        </div>
      </div>

      <div className="footer__brand display">
        Сугория<span className="yellow">.</span>
      </div>

      <div className="footer__bottom">
        <span>© 1963 — 2025 «Сугория» / ООО «Экогаз»</span>
        <span>Сделано на Урале · Челябинская обл.</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, {
  Nav, Hero, Ticker, Directions, AgzsSection, B2B, EcoBanner, BigStat,
  Loyalty, Company, Charity, Contacts, Footer, Arrow,
});
