/* Маркар landing — content sections. Side-effect-safe: deps + icon arrays
   are read INSIDE each component, never at IIFE-eval time. */
(function () {
  /* ---------- Directions (3 business lines) ---------- */
  function Directions({ onModels, onCta }) {
    const React = window.React;
    const { Card, Badge } = window.DesignSystem_019df8;
    const { Car, Key, Gauge, ChevronRight } = window.MkIcons;
    return (
      <section className="mk-section" id="directions">
        <div className="mk-container">
          <p className="mk-overline">Три направления</p>
          <h2 className="mk-h2">Новые авто, машины с пробегом и сервис</h2>
          <div className="mk-dirs">
            <Card variant="outlined" padding="lg" hover as="button" onClick={onModels} style={{ textAlign: 'left', cursor: 'pointer', border: 'none', boxShadow: 'inset 0 0 0 1.5px var(--border-subtle)' }}>
              <div className="mk-dir">
                <div className="mk-dir__ico"><Car size={26} /></div>
                <h3 className="mk-dir__h">Новые автомобили</h3>
                <p className="mk-dir__p">Официальный дилер GAC, Soueast и Evolute. Гарантия производителя, авто в наличии, тест-драйв в день обращения.</p>
                <div className="mk-dir__brands">
                  <Badge variant="neutral" size="sm">GAC</Badge>
                  <Badge variant="neutral" size="sm">Soueast</Badge>
                  <Badge variant="neutral" size="sm">Evolute</Badge>
                </div>
                <span className="mk-dir__link">Смотреть модели <ChevronRight size={16} /></span>
              </div>
            </Card>
            <Card variant="outlined" padding="lg" hover as="button" onClick={onCta} style={{ textAlign: 'left', cursor: 'pointer', border: 'none', boxShadow: 'inset 0 0 0 1.5px var(--border-subtle)' }}>
              <div className="mk-dir">
                <div className="mk-dir__ico"><Key size={24} /></div>
                <h3 className="mk-dir__h">Авто с пробегом</h3>
                <p className="mk-dir__p">Проверенные машины с понятной историей и юридической чистотой. Поможем с обменом и трейд-ин на новую.</p>
                <div className="mk-dir__brands">
                  <Badge variant="available" size="sm" dot>после проверки</Badge>
                </div>
                <span className="mk-dir__link">Подобрать с пробегом <ChevronRight size={16} /></span>
              </div>
            </Card>
            <Card variant="outlined" padding="lg" hover as="button" onClick={onCta} style={{ textAlign: 'left', cursor: 'pointer', border: 'none', boxShadow: 'inset 0 0 0 1.5px var(--border-subtle)' }}>
              <div className="mk-dir">
                <div className="mk-dir__ico"><Gauge size={24} /></div>
                <h3 className="mk-dir__h">Сервис и ТО</h3>
                <p className="mk-dir__p">Обслуживание и ремонт в Петрозаводске. Регламентное ТО, диагностика и кузовные работы с гарантией.</p>
                <div className="mk-dir__brands">
                  <Badge variant="neutral" size="sm">GAC</Badge>
                  <Badge variant="neutral" size="sm">Soueast</Badge>
                  <Badge variant="neutral" size="sm">Evolute</Badge>
                </div>
                <span className="mk-dir__link">Записаться на сервис <ChevronRight size={16} /></span>
              </div>
            </Card>
          </div>
        </div>
      </section>
    );
  }
  window.Directions = Directions;

  /* ---------- Рекомендация: электро и гибриды — карусель ---------- */
  function EvRec({ onQuiz }) {
    const React = window.React;
    const { useState } = React;
    const { Button } = window.DesignSystem_019df8;
    const { Zap, Repeat, ArrowRight, ChevronLeft, ChevronRight } = window.MkIcons;
    const CARS = ALL_MODELS.filter((m) => m.energy);
    const [i, setI] = useState(0);
    const m = CARS[i] || CARS[0];
    if (!m) return null;
    const step = (d) => setI((v) => (v + d + CARS.length) % CARS.length);
    const openModel = () => window.dispatchEvent(new CustomEvent('mk:open-model', { detail: { id: m.id } }));
    const openAll = () => window.dispatchEvent(new CustomEvent('mk:open-catalog', { detail: {} }));
    const isEv = m.energy === 'ev';
    return (
      <section className="mk-evrec" id="ev-rec">
        <div className="mk-container">
          <div className="mk-evwin">
            <div className="mk-evwin__bar">
              <span className="mk-evwin__dots"><i></i><i></i><i></i></span>
              <span className="mk-evwin__title"><Zap size={14} /> Электро и гибриды · {i + 1}/{CARS.length}</span>
              <span className="mk-evwin__arrows">
                <button type="button" onClick={() => step(-1)} aria-label="Предыдущая модель"><ChevronLeft size={16} /></button>
                <button type="button" onClick={() => step(1)} aria-label="Следующая модель"><ChevronRight size={16} /></button>
              </span>
            </div>
            <div className="mk-evwin__body">
              <button type="button" className="mk-evwin__media mk-photo" data-label={m.name} onClick={openModel} aria-label={'Открыть ' + m.name + ' в каталоге'}>
                <img key={m.id} src={'photos/' + m.id + '.jpg'} alt={m.name} loading="lazy"
                  onError={(e) => { e.currentTarget.style.display = 'none'; }} />
                <span className={'mk-evwin__tag' + (isEv ? '' : ' mk-evwin__tag--hy')}><Zap size={13} /> {isEv ? 'Электрокар' : 'Гибрид'}</span>
              </button>
              <div className="mk-evwin__info">
                <div className="mk-evwin__badges">
                  <span className="mk-evbadge mk-evbadge--ev"><Zap size={13} /> {isEv ? 'Электромобиль' : 'Гибрид'}</span>
                  <span className="mk-evbadge mk-evbadge--trade"><Repeat size={13} /> Доступно в трейд-ин</span>
                </div>
                <button type="button" className="mk-evwin__name" onClick={openModel}>{m.name} <ArrowRight size={15} /></button>
                <p className="mk-evwin__desc" style={{ fontSize: 14, margin: '6px 0 0' }}>{m.spec}</p>
                <div className="mk-evwin__foot">
                  <div className="mk-evwin__price"><small>от</small> {mkFmtPrice(m.from)}</div>
                  <div className="mk-evwin__cta">
                    <Button variant="primary" size="md" iconRight={<ArrowRight size={16} />} onClick={openAll}>Подобрать</Button>
                    <button className="mk-evwin__link" onClick={openAll}>Все модели</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }
  window.EvRec = EvRec;

  /* ---------- Фото-слайдер модели: свайп + стрелки + точки. Файлы photos/<id>-2.jpg,
     photos/<id>-3.jpg появятся — слайды подхватятся автоматически;
     пока их нет — аккуратные слайды-заглушки «Фото скоро». ---------- */
  function MkPhotoSlider({ base, name, label, fill, onOpen }) {
    const React = window.React;
    const { useState, useRef } = React;
    const { ChevronLeft, ChevronRight } = window.MkIcons;
    const CANDS = [base + '.jpg', base + '-2.jpg', base + '-3.jpg', base + '-4.jpg'];
    const [dead, setDead] = useState({});
    const [idx, setIdx] = useState(0);
    const stripRef = useRef(null);
    const srcs = CANDS.filter((s) => !dead[s]);
    const phN = Math.max(0, (fill || 0) - srcs.length);
    const total = srcs.length + phN;
    const kill = (s) => setDead((d) => { const n = Object.assign({}, d); n[s] = true; return n; });
    const go = (e, d) => {
      e.stopPropagation();
      const st = stripRef.current; if (!st) return;
      const n = Math.max(0, Math.min(total - 1, idx + d));
      st.scrollTo({ left: n * st.clientWidth, behavior: 'smooth' });
      setIdx(n);
    };
    const onScroll = () => { const st = stripRef.current; if (!st) return; setIdx(Math.round(st.scrollLeft / Math.max(1, st.clientWidth))); };
    if (!total) return <div className="mk-photo mk-slider" data-label={label || name}></div>;
    return (
      <div className="mk-slider">
        <div className="mk-slider__strip" ref={stripRef} onScroll={onScroll}>
          {srcs.map((s, i) => (
            <img key={s} src={'photos/' + s} alt={name + ' — фото ' + (i + 1)} loading="lazy"
              onError={() => kill(s)}
              onClick={onOpen ? (e) => { e.stopPropagation(); onOpen(i, srcs); } : undefined} />
          ))}
          {Array.from({ length: phN }).map((_, i) => (
            <span className="mk-slider__ph" key={'ph' + i}>Фото скоро</span>
          ))}
        </div>
        {total > 1 ? (
          <React.Fragment>
            <button type="button" className="mk-slider__nav mk-slider__nav--prev" onClick={(e) => go(e, -1)} aria-label="Предыдущее фото"><ChevronLeft size={18} /></button>
            <button type="button" className="mk-slider__nav mk-slider__nav--next" onClick={(e) => go(e, 1)} aria-label="Следующее фото"><ChevronRight size={18} /></button>
            <span className="mk-slider__dots" aria-hidden="true">{Array.from({ length: total }).map((_, i) => (<i key={i} className={i === idx ? 'is-on' : ''}></i>))}</span>
          </React.Fragment>
        ) : null}
      </div>
    );
  }
  window.MkPhotoSlider = MkPhotoSlider;

  /* ---------- Advantages ---------- */
  function Advantages() {
    const React = window.React;
    const { ShieldCheck, Car, Sliders, Headset } = window.MkIcons;
    const ADV = [
      [<ShieldCheck size={26} />, 'Гарантия производителя', 'Три официальных бренда — GAC, Soueast, Evolute. Гарантия и сервис по регламенту марки, без сюрпризов после покупки.'],
      [<Car size={26} />, 'Авто действительно в наличии', 'Показываем конкретные машины со склада, а не «под заказ через полгода». Приезжайте — посмотрите вживую.'],
      [<Sliders size={26} />, 'Прозрачная комплектация', 'Честно рассказываем, что входит в версию, и не навязываем лишние опции и допы.'],
      [<Headset size={26} />, 'Сопровождение сделки', 'Кредит, страховка, трейд-ин и сервис — в одном месте. Помогаем оформить, а не бросаем на полпути.'],
    ];
    return (
      <section className="mk-section mk-section--subtle" id="advantages">
        <div className="mk-container">
          <p className="mk-overline">Почему MARCAR</p>
          <h2 className="mk-h2">Честно о машине и условиях</h2>
          <div className="mk-adv">
            {ADV.map(([ico, h, p]) => (
              <div className="mk-adv__item" key={h}>
                <div className="mk-adv__ico">{ico}</div>
                <h3 className="mk-adv__h">{h}</h3>
                <p className="mk-adv__p">{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }
  window.Advantages = Advantages;

  /* ---------- Models ---------- */
  /* Реальный наличный состав (из прайса дилера). У каждой модели — описание,
     характеристики и реальные комплектации с ценами для выбора в карточке. */
  var ALL_MODELS = [
    { id: 'jetta', brand: 'Jetta', name: 'Jetta VA3', type: 'Седан',
      spec: 'Седан · 1.5 AT · 111 л.с.', price: '1 910 000 ₽', from: 1910000, pop: true,
      engine: '1.5 л · бензин', power: '111 л.с.', drive: 'Передний (2WD)',
      desc: 'Городской седан на платформе Volkswagen. Просторный салон, экономичный атмосферный мотор 1.5 и классический гидроавтомат — практичный и надёжный выбор для города, семьи и работы в такси-комфорт.',
      trims: [
        { name: 'Aggressive', price: 1910000, note: 'Базовая · всё необходимое для города',
          equip: ['Классический автомат (AT)', 'Кондиционер', 'Мультимедиа с сенсорным экраном, Bluetooth', 'Электростеклоподъёмники', 'Камера заднего вида', 'Система стабилизации ESP + ABS', 'Фронтальные и боковые подушки безопасности', 'Литые диски 16"'] },
        { name: 'Enjoyment', price: 2010000, note: 'Комфорт · климат, обогревы, доступ без ключа',
          equip: ['Всё из Aggressive', 'Автоматический климат-контроль', 'Экран мультимедиа увеличенного размера', 'Отделка сидений «под кожу»', 'Подогрев передних сидений', 'Круиз-контроль', 'Датчики парковки', 'Бесключевой доступ и запуск с кнопки', 'Датчики света и дождя', 'Литые диски 17"'] },
      ] },
    { id: 'empow', brand: 'GAC', name: 'GAC Empow', type: 'Седан',
      spec: 'Спорт-седан · 1.5 T · 170 л.с.', price: '3 319 000 ₽', from: 3319000, pop: true,
      engine: '1.5 турбо · бензин', power: '170 л.с.', drive: 'Передний (2WD)',
      desc: 'Заряженный спорт-седан с турбомотором 1.5T (170 л.с.) и роботизированной коробкой. Выразительный дизайн, спортивная управляемость и богатое оснащение «из коробки».',
      trims: [
        { name: 'GL', price: 3319000, note: 'В наличии · спорт-оснащение полностью',
          equip: ['Турбомотор 1.5T, 170 л.с.', '7-ступенчатый робот DCT', 'Спортивная подвеска и настройка руля', 'Цифровая приборная панель', 'Большой мультимедийный экран', 'Автоматический климат-контроль', 'Кожаная отделка салона', 'Подогрев передних сидений', 'Камера кругового обзора 360°', 'Комплекс ассистентов ADAS', 'Спортивные литые диски'] },
      ] },
    { id: 's06', brand: 'Soueast', name: 'Soueast S06', type: 'Кроссовер',
      spec: 'Кроссовер · 1.5 T · 147 л.с.', price: '3 400 000 ₽', from: 3400000,
      engine: '1.5 турбо · бензин', power: '147 л.с.', drive: 'Передний (2WD)',
      desc: 'Компактный городской кроссовер с турбомотором 1.5T (147 л.с.). Современный салон с двумя дисплеями, панорамная крыша и уверенная динамика в городе.',
      trims: [
        { name: 'Престиж', price: 3400000, note: 'В наличии · панорама, камера 360°, ADAS',
          equip: ['Турбомотор 1.5T, 147 л.с.', 'Панорамная крыша', 'Двойной дисплей: приборы + мультимедиа', 'Автоматический климат-контроль', 'Отделка «эко-кожа»', 'Подогрев передних сидений и руля', 'Камера кругового обзора 360°', 'Электропривод багажника', 'Ассистенты движения ADAS', 'Беспроводная зарядка смартфона'] },
      ] },
    { id: 's07', brand: 'Soueast', name: 'Soueast S07', type: 'Кроссовер',
      spec: 'Кроссовер · 1.6 T · 186 л.с. · 4WD', price: '3 400 000 ₽', from: 3400000, pop: true,
      engine: '1.6 турбо · бензин', power: '186 л.с.', drive: 'Полный (4WD)',
      desc: 'Среднеразмерный кроссовер с полным приводом и турбомотором 1.6T (186 л.с.). Простор для семьи, богатое оснащение и уверенность на любой дороге и в любую погоду.',
      trims: [
        { name: 'Престиж', price: 3400000, note: 'Базовая · полный привод, панорама, ADAS',
          equip: ['Полный привод 4WD', 'Турбомотор 1.6T, 186 л.с.', 'Панорамная крыша', 'Двойной цифровой дисплей', 'Двухзонный климат-контроль', 'Отделка «эко-кожа»', 'Подогрев передних сидений', 'Камера кругового обзора 360°', 'Комплекс ADAS: удержание в полосе, автоторможение'] },
        { name: 'Премиум', price: 3600000, note: 'Максимум · вентиляция сидений, HUD, адаптивный круиз',
          equip: ['Всё из «Престиж»', 'Вентиляция передних сидений', 'Подогрев задних сидений и руля', 'Премиальная аудиосистема', 'Электрорегулировка сидений с памятью', 'Проекция на лобовое стекло (HUD)', 'Адаптивный круиз-контроль', 'Литые диски увеличенного диаметра'] },
      ] },
    { id: 'gs4', brand: 'GAC', name: 'GAC GS4', type: 'Кроссовер',
      spec: 'Кроссовер · 2.0 T · 231 л.с. · 4WD', price: '3 699 000 ₽', from: 3699000,
      engine: '2.0 турбо · бензин', power: '231 л.с.', drive: 'Полный (4WD)',
      desc: 'Популярный кроссовер GAC с мощным турбомотором 2.0T (231 л.с.), 8-ступенчатым автоматом и полным приводом. Надёжность, комфорт и богатое оснащение по разумной цене.',
      trims: [
        { name: 'GB', price: 3699000, note: 'Базовая · 4WD, кожа, обогревы',
          equip: ['Полный привод 4WD', 'Турбомотор 2.0T, 231 л.с.', '8-ступенчатый автомат', 'Автоматический климат-контроль', 'Мультимедиа с большим экраном', 'Кожаная отделка салона', 'Подогрев передних сидений', 'Камера заднего вида и парктроники', 'Система стабилизации и ассистенты'] },
        { name: 'GL', price: 3849000, note: 'Максимум · панорама, 360°, вентиляция сидений',
          equip: ['Всё из GB', 'Панорамная крыша', 'Камера кругового обзора 360°', 'Вентиляция передних сидений', 'Электропривод багажника', 'Премиальная аудиосистема', 'Расширенный пакет ADAS', 'Литые диски большего диаметра'] },
      ] },
    { id: 'ispace', brand: 'Evolute', name: 'Evolute i-Space', type: 'Электро', energy: 'ev',
      spec: 'Электроминивэн · 218 л.с. · до 7 мест', price: '3 585 000 ₽', from: 3585000,
      engine: 'Электро', power: '218 л.с.', drive: '2WD / 4WD',
      desc: 'Электрический минивэн: до 7 мест, мощность 218 л.с., тихий ход и низкая стоимость километра. Быстрая зарядка, нулевой транспортный налог и запас хода для города и трассы.',
      trims: [
        { name: '7-местный · 2WD', price: 3585000, note: 'Семейный · 3 ряда, задний привод',
          equip: ['Электромотор 218 л.с.', '7 мест в 3 ряда', 'Задний привод (2WD)', 'Поддержка быстрой зарядки DC', 'Двойной дисплей: приборы + мультимедиа', 'Автоматический климат-контроль', 'Отделка «эко-кожа»', 'Подогрев передних сидений', 'Камера кругового обзора 360°', 'Ассистенты движения ADAS', 'Нулевой транспортный налог (электро)'] },
        { name: '5-местный · 4WD', price: 3790000, note: 'Полный привод · больше багажник, топ-оснащение',
          equip: ['Электромотор 218 л.с.', 'Полный привод 4WD', '5 мест, увеличенный багажник', 'Поддержка быстрой зарядки DC', 'Двойной дисплей', 'Двухзонный климат-контроль', 'Вентиляция и подогрев передних сидений', 'Панорамная крыша', 'Премиальная аудиосистема', 'Расширенный пакет ADAS'] },
      ] },
    { id: 'gs8', brand: 'GAC', name: 'GAC GS8', type: 'Кроссовер',
      spec: 'Большой кроссовер · 2.0 T · 231 л.с. · 4WD · 7 мест', price: '4 949 000 ₽', from: 4949000,
      engine: '2.0 турбо · бензин', power: '231 л.с.', drive: 'Полный (4WD)',
      desc: 'Большой 7-местный кроссовер представительского уровня. Турбомотор 2.0T (231 л.с.), 8-ступенчатый автомат, полный привод и премиальный салон для всей семьи и дальних поездок.',
      trims: [
        { name: 'GT', price: 4949000, note: 'Базовая · 7 мест, панорама, кожа, 360°',
          equip: ['Полный привод 4WD', 'Турбомотор 2.0T, 231 л.с., 8-ст. АКПП', '7 мест в 3 ряда', 'Панорамная крыша', 'Кожаный салон', 'Двухзонный климат-контроль', 'Подогрев и вентиляция передних сидений', 'Камера кругового обзора 360°', 'Электропривод двери багажника', 'Комплекс ADAS'] },
        { name: 'Премиум', price: 5349000, note: 'Максимум · капитанские кресла, HUD, массаж',
          equip: ['Всё из GT', 'Премиальная кожаная отделка', 'Капитанские кресла 2-го ряда', 'Аудиосистема премиум-класса', 'Проекция на лобовое стекло (HUD)', 'Массаж и память передних сидений', 'Адаптивный круиз-контроль', 'Мультиконтурные сиденья', 'Люксовая отделка потолка'] },
      ] },
    { id: 's7', brand: 'GAC', name: 'GAC S7', type: 'Кроссовер', energy: 'hybrid',
      spec: 'Флагман · 1.5 гибрид · 4WD', price: '6 249 000 ₽', from: 6249000,
      engine: '1.5 · гибрид', power: '122 л.с.', drive: 'Полный (4WD)',
      desc: 'Флагманский кроссовер GAC с гибридной установкой и полным приводом. Наппа-кожа, крупные дисплеи, максимум технологий безопасности и комфорта.',
      trims: [
        { name: 'Premium', price: 6249000, note: 'Флагман · серый 6 249 000 ₽ · чёрный 6 349 000 ₽',
          equip: ['Полный привод 4WD', 'Гибридная установка на базе 1.5', 'Флагманский интерьер с крупными дисплеями', 'Панорамная крыша', 'Отделка Наппа-кожей', 'Вентиляция, подогрев и массаж передних сидений', 'Аудиосистема премиум-класса', 'Проекция на лобовое стекло (HUD)', 'Полный пакет ADAS: адаптивный круиз, автопарковка', 'Адаптивная подвеска', 'Матричная светодиодная оптика'] },
      ] },
  ];

  function mkFmtPrice(n) {
    return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, '\u2009') + ' \u20bd';
  }

  /* Окно со всеми моделями. Клик по модели → детальная карточка с описанием,
     характеристиками и выбором комплектации по разным ценам. */
  function ModelsModal({ onClose, initial, initialType }) {
    const React = window.React;
    const { useState, useEffect } = React;
    const { Button, Input, Badge } = window.DesignSystem_019df8;
    const { X, Check, Phone, ShieldCheck, ArrowRight, ArrowLeft, Gauge, Cog, Zap, Car } = window.MkIcons;
    const U = window.MkUtils;
    const BRANDS = ['Все', 'GAC', 'Soueast', 'Evolute', 'Jetta'];
    const TYPES = ['Все типы', 'Кроссовер', 'Седан', 'Электро и гибрид'];
    const [brand, setBrand] = useState('Все');
    const [type, setType] = useState(initialType || 'Все типы');
    const [lb, setLb] = useState(null);
    const [detail, setDetail] = useState(initial || null);  // открытая модель
    const [trimIdx, setTrimIdx] = useState(0);
    const [name, setName] = useState('');
    const [phone, setPhone] = useState('');
    const [agree, setAgree] = useState(true);
    const [sending, setSending] = useState(false);
    const [done, setDone] = useState(false);
    const gridRef = React.useRef(null);

    useEffect(() => {
      const prev = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      const onKey = (e) => { if (e.key === 'Escape') { if (detail) { setDetail(null); } else { onClose(); } } };
      window.addEventListener('keydown', onKey);
      return () => { document.body.style.overflow = prev; window.removeEventListener('keydown', onKey); };
    }, [detail]);

    function openModel(m) { setDetail(m); setTrimIdx(0); setDone(false); if (gridRef.current) gridRef.current.scrollTop = 0; }

    const list = ALL_MODELS.filter((m) => (brand === 'Все' || m.brand === brand) && (type === 'Все типы' || (type === 'Электро и гибрид' ? !!m.energy : m.type === type)));
    const phoneOk = U.isValidPhone(phone);
    const trim = detail ? detail.trims[trimIdx] : null;

    function submit() {
      if (!phoneOk || !agree || sending) return;
      setSending(true);
      U.submitLead({ source: 'catalog', name: name, phone: phone,
        model: detail ? detail.name : null,
        trim: trim ? trim.name : null,
        price: trim ? trim.price : null }).then((r) => {
        setSending(false);
        if (r && r.ok === false) { window.alert('Не удалось отправить заявку. Позвоните нам: +7 (8142) 55-45-05'); return; }
        setDone(true);
      });
    }

    /* ----- Форма заявки (используется в каталоге и в карточке) ----- */
    function renderForm() {
      if (done) {
        return (
          <div className="mk-modal__success">
            <span className="mk-quiz__check" style={{ width: 48, height: 48, marginBottom: 0 }}><Check size={24} stroke={3} /></span>
            <div>
              <b>Заявка принята!</b>
              <span>Перезвоним на {phone} и расскажем по {detail ? detail.name : 'выбранной модели'}.</span>
            </div>
          </div>
        );
      }
      return (
        <React.Fragment>
          <div className="mk-modal__selrow">
            {detail ? (
              <React.Fragment>
                <span className="mk-modal__sellbl">{detail.name} · {trim.name}</span>
                <b className="mk-modal__selprice">{mkFmtPrice(trim.price)}</b>
              </React.Fragment>
            ) : (
              <React.Fragment>
                <span className="mk-modal__sellbl">Выбрано:</span>
                <b>любая модель — поможем определиться</b>
              </React.Fragment>
            )}
          </div>
          <div className="mk-modal__fields">
            <Input label="Имя" placeholder="Как к вам обращаться" value={name} onChange={(e) => setName(e.target.value)} />
            <Input label="Телефон" required type="tel" inputMode="tel" placeholder="+7 (___) ___-__-__"
              icon={<Phone size={18} />} value={phone} onChange={(e) => setPhone(U.formatPhone(e.target.value))} />
            <Button variant="primary" size="xl" fullWidth disabled={!phoneOk || !agree || sending}
              iconRight={sending ? null : <ArrowRight size={20} />} onClick={submit}>
              {sending ? 'Отправляем…' : (detail ? 'Забронировать эту сборку' : 'Оставить заявку')}
            </Button>
          </div>
          <label className="mk-consent">
            <input type="checkbox" checked={agree} onChange={(e) => setAgree(e.target.checked)} />
            <span className="mk-consent__box" aria-hidden="true"></span>
            <span className="mk-consent__txt">Я согласен на <a href="privacy.html" target="_blank" rel="noopener">обработку персональных данных</a></span>
          </label>
          <p className="mk-quiz__reassure"><ShieldCheck size={16} /> Перезвоним в течение 15 минут в рабочее время</p>
        </React.Fragment>
      );
    }

    /* ----- Детальная карточка модели ----- */
    function renderDetail() {
      const m = detail;
      const SPECS = [
        [<Cog size={18} />, 'Двигатель', m.engine],
        [m.engine === 'Электро' ? <Zap size={18} /> : <Gauge size={18} />, 'Мощность', m.power],
        [<Car size={18} />, 'Привод', m.drive],
      ];
      return (
        <div className="mk-detail" ref={gridRef}>
          <div className="mk-detail__media">
            <MkPhotoSlider base={m.id} name={m.name} label={m.name} fill={3}
              onOpen={(i, srcs) => setLb({ srcs: srcs, i: i })} />
            <div className="mk-detail__badges">
              <Badge variant="available" size="sm" dot>В наличии</Badge>
              <Badge variant="neutral" size="sm">{m.brand}</Badge>
            </div>
          </div>

          <div className="mk-detail__body">
            <h3 className="mk-detail__name">{m.name}</h3>
            <p className="mk-detail__spec">{m.spec}</p>
            <p className="mk-detail__desc">{m.desc}</p>

            <div className="mk-detail__specs">
              {SPECS.map(([ico, l, v]) => (
                <div className="mk-spec" key={l}>
                  <span className="mk-spec__ico">{ico}</span>
                  <span className="mk-spec__l">{l}</span>
                  <span className="mk-spec__v">{v}</span>
                </div>
              ))}
            </div>

            <div className="mk-detail__trims">
              <span className="mk-detail__lbl">Комплектация</span>
              {m.trims.map((t, i) => (
                <button type="button" key={t.name}
                  className={'mk-trimrow' + (i === trimIdx ? ' is-active' : '')}
                  onClick={() => setTrimIdx(i)}>
                  <span className="mk-trimrow__radio" aria-hidden="true"></span>
                  <span className="mk-trimrow__txt">
                    <b>{t.name}</b>
                    <small>{t.note}</small>
                  </span>
                  <span className="mk-trimrow__price">{mkFmtPrice(t.price)}</span>
                </button>
              ))}
            </div>

            {m.trims[trimIdx] && m.trims[trimIdx].equip ? (
              <div className="mk-detail__equip">
                <span className="mk-detail__lbl">Оснащение · {m.trims[trimIdx].name}</span>
                <ul className="mk-equip">
                  {m.trims[trimIdx].equip.map((f) => (
                    <li key={f}><Check size={15} /> {f}</li>
                  ))}
                </ul>
              </div>
            ) : null}

            <div className="mk-detail__form">
              {renderForm()}
            </div>
          </div>
        </div>
      );
    }

    return (
      <div className="mk-modal" role="dialog" aria-modal="true" aria-label="Все модели в наличии">
        <div className="mk-modal__backdrop" onClick={onClose}></div>
        <div className={'mk-modal__panel' + (detail ? ' mk-modal__panel--detail' : '')}>
          <header className="mk-modal__head">
            {detail ? (
              <button type="button" className="mk-modal__back" onClick={() => setDetail(null)}>
                <ArrowLeft size={18} /> Все модели
              </button>
            ) : (
              <div>
                <p className="mk-overline">Все модели в наличии</p>
                <h3 className="mk-modal__title">Каталог моделей в наличии</h3>
              </div>
            )}
            <button type="button" className="mk-modal__close" onClick={onClose} aria-label="Закрыть"><X size={22} /></button>
          </header>

          {!detail ? (
            <React.Fragment>
              <div className="mk-modal__filters">
                <div className="mk-modal__filterrow">
                  {BRANDS.map((b) => (
                    <button type="button" key={b}
                      className={'mk-chip' + (brand === b ? ' is-active' : '')}
                      onClick={() => setBrand(b)}>{b}</button>
                  ))}
                </div>
                <div className="mk-modal__filterrow">
                  {TYPES.map((t) => (
                    <button type="button" key={t}
                      className={'mk-chip mk-chip--sm' + (type === t ? ' is-active' : '')}
                      onClick={() => { setType(t); setBrand('Все'); }}>{t}</button>
                  ))}
                  <span className="mk-modal__count">{list.length} {U.plural ? U.plural(list.length, 'модель', 'модели', 'моделей') : 'моделей'}</span>
                </div>
              </div>

              <div className="mk-modal__grid" ref={gridRef}>
                {list.map((m) => (
                  <button type="button" key={m.id} className="mk-modelmini" onClick={() => openModel(m)}>
                    <div className="mk-modelmini__photo mk-photo" data-label={m.name}>
                      <img src={'photos/' + m.id + '.jpg'} alt={m.name} loading="lazy"
                        onError={(e) => { e.currentTarget.style.display = 'none'; }} />
                    </div>
                    <div className="mk-modelmini__body">
                      <div className="mk-modelmini__top">
                        <Badge variant="neutral" size="sm">{m.brand}</Badge>
                        {m.pop ? <Badge variant="available" size="sm" dot>Хит</Badge> : null}
                      </div>
                      <h4 className="mk-modelmini__name">{m.name}</h4>
                      <p className="mk-modelmini__spec">{m.spec}</p>
                      <div className="mk-modelmini__price"><small>от</small> {m.price}</div>
                    </div>
                    <span className="mk-modelmini__open" aria-hidden="true"><ArrowRight size={16} /></span>
                  </button>
                ))}
              </div>
            </React.Fragment>
          ) : renderDetail()}
        </div>
        {lb ? (
          <div className="mk-lb" onClick={() => setLb(null)} role="dialog" aria-modal="true">
            <button className="mk-lb__close" onClick={() => setLb(null)} aria-label="Закрыть"><X size={22} /></button>
            {lb.srcs.length > 1 ? (
              <button className="mk-lb__nav mk-lb__nav--prev" onClick={(e) => { e.stopPropagation(); setLb((v) => ({ srcs: v.srcs, i: (v.i - 1 + v.srcs.length) % v.srcs.length })); }} aria-label="Предыдущее фото"><ArrowLeft size={24} /></button>
            ) : null}
            <figure className="mk-lb__stage" onClick={(e) => e.stopPropagation()}>
              <img className="mk-lb__img" src={'photos/' + lb.srcs[lb.i]} alt={detail ? detail.name : ''} />
              <figcaption className="mk-lb__cap">{detail ? detail.name : ''}<span>{lb.i + 1} / {lb.srcs.length}</span></figcaption>
            </figure>
            {lb.srcs.length > 1 ? (
              <button className="mk-lb__nav mk-lb__nav--next" onClick={(e) => { e.stopPropagation(); setLb((v) => ({ srcs: v.srcs, i: (v.i + 1) % v.srcs.length })); }} aria-label="Следующее фото"><ArrowRight size={24} /></button>
            ) : null}
          </div>
        ) : null}
      </div>
    );
  }

  function Models({ onCta }) {
    const React = window.React;
    const { useState } = React;
    const { Card, Button, Badge } = window.DesignSystem_019df8;
    const { ArrowRight, ChevronRight } = window.MkIcons;
    const [open, setOpen] = useState(false);
    const [initial, setInitial] = useState(null);
    const [initialType, setInitialType] = useState(null);
    React.useEffect(() => {
      const onOpenModel = (e) => {
        const m = ALL_MODELS.find((x) => x.id === (e.detail && e.detail.id));
        if (m) { setInitial(m); setInitialType(null); setOpen(true); }
      };
      const onOpenCat = (e) => { setInitial(null); setInitialType((e.detail && e.detail.type) || null); setOpen(true); };
      window.addEventListener('mk:open-model', onOpenModel);
      window.addEventListener('mk:open-catalog', onOpenCat);
      return () => { window.removeEventListener('mk:open-model', onOpenModel); window.removeEventListener('mk:open-catalog', onOpenCat); };
    }, []);
    const POPULAR = ALL_MODELS.filter((m) => m.pop);
    const openModel = (m) => { setInitial(m); setOpen(true); };
    return (
      <section className="mk-section mk-section--subtle" id="models">
        <div className="mk-container">
          <p className="mk-overline">Новые в наличии</p>
          <h2 className="mk-h2">Модели GAC, Soueast, Evolute и Jetta</h2>
          <p className="mk-lead" style={{ marginTop: 12 }}>Три самых популярных — а весь каталог открывается в одном окне.</p>
          <div className="mk-models">
            {POPULAR.map((m) => (
              <Card key={m.id} variant="raised" padding="md" hover as="div" role="button" tabIndex={0} onClick={() => openModel(m)}
                style={{ textAlign: 'left', cursor: 'pointer', display: 'flex', flexDirection: 'column' }}>
                <div className="mk-model__photo">
                  <MkPhotoSlider base={m.id} name={m.name} label={'Фото · ' + m.name} fill={3} />
                </div>
                <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                  <Badge variant="available" size="sm" dot>В наличии</Badge>
                  <Badge variant="neutral" size="sm">{m.brand}</Badge>
                </div>
                <div className="mk-model__row" style={{ marginTop: 12 }}>
                  <div>
                    <h3 className="mk-model__name">{m.name}</h3>
                    <p className="mk-model__spec">{m.spec}</p>
                  </div>
                  <div className="mk-model__price">
                    <small>от</small>{m.price}
                  </div>
                </div>
                <div className="mk-model__foot">
                  <span className="mk-btn-faux">Открыть и выбрать <ArrowRight size={18} /></span>
                </div>
              </Card>
            ))}

            <Card variant="outlined" padding="md" hover as="button" onClick={() => { setInitial(null); setOpen(true); }}
              style={{ textAlign: 'left', cursor: 'pointer', border: 'none', boxShadow: 'inset 0 0 0 1.5px var(--border-subtle)', display: 'flex', flexDirection: 'column' }}>
              <div className="mk-models__all">
                <span className="mk-models__all-ico"><ChevronRight size={26} /></span>
                <h3 className="mk-models__all-h">Смотреть все модели</h3>
                <p className="mk-models__all-p">Весь каталог GAC, Soueast, Evolute и Jetta — {ALL_MODELS.length} моделей в наличии. Выберите и оставьте заявку в одном окне.</p>
                <span className="mk-dir__link">Открыть каталог <ArrowRight size={16} /></span>
              </div>
            </Card>
          </div>
          <p style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 18 }}>
            Цены указаны по РРЦ на момент публикации. Наличие, комплектацию и актуальную цену уточняйте у менеджера.
          </p>
        </div>
        {open ? <ModelsModal initial={initial} initialType={initialType} onClose={() => setOpen(false)} /> : null}
      </section>
    );
  }
  window.Models = Models;

  /* ---------- Trade-in / credit (светлый мини-блок) ---------- */
  function TradeIn({ onCta }) {
    const React = window.React;
    const { Button } = window.DesignSystem_019df8;
    const { Repeat, Banknote, Check, ArrowRight } = window.MkIcons;
    const LIST = [
      [<Repeat size={18} />, 'Оценим вашу машину честно, по рынку'],
      [<Banknote size={18} />, 'Подберём ставку и поможем с одобрением'],
      [<Check size={18} />, 'Рассчитаем платёж под ваш бюджет'],
    ];
    const ROWS = [
      ['Доплата за вашу машину', 'при обмене на новую', '+150 000 ₽', true],
      ['Оценка авто', 'пока вы пьёте кофе', '30 мин', false],
      ['Ставка по кредиту', 'на новые авто', 'от 0,01%', false],
    ];
    return (
      <section className="mk-section" id="tradein">
        <div className="mk-container">
          <div className="mk-tradein">
            <div className="mk-tradein__main">
              <p className="mk-overline">Трейд-ин и кредит</p>
              <h2 className="mk-h2">Сдайте старую машину в счёт новой</h2>
              <p className="mk-lead" style={{ marginTop: 12 }}>Оценим вашу машину за 30 минут и зачтём её стоимость в покупку. Останется доплатить разницу — наличными или в кредит.</p>
              <ul className="mk-tradein__list">
                {LIST.map(([ico, t]) => (<li key={t}>{ico}<span>{t}</span></li>))}
              </ul>
            </div>
            <div className="mk-tradein__panel">
              <div className="mk-tradein__panel-h">Ваша выгода <span>пример расчёта</span></div>
              <div className="mk-tradein__rows">
                {ROWS.map(([l, sub, v, acc]) => (
                  <div className="mk-tradein__row" key={l}>
                    <div className="mk-tradein__row-l">{l}<small>{sub}</small></div>
                    <div className={'mk-tradein__row-v' + (acc ? ' is-accent' : '')}>{v}</div>
                  </div>
                ))}
              </div>
              <div className="mk-tradein__cta">
                <Button variant="primary" size="lg" fullWidth iconRight={<ArrowRight size={18} />} onClick={onCta}>
                  Рассчитать мою выгоду
                </Button>
                <Button variant="secondary" size="md" fullWidth onClick={onCta}>
                  Оценить авто в трейд-ин
                </Button>
              </div>
              <p className="mk-tradein__fine">Цифры — пример. Точную выгоду назовём после осмотра и оценки.</p>
            </div>
          </div>
        </div>
      </section>
    );
  }
  window.TradeIn = TradeIn;

  /* ---------- Запись на сервис (компактный мини-блок) ---------- */
  function ServiceBooking() {
    const React = window.React;
    const { useState } = React;
    const { Card, Button, Input } = window.DesignSystem_019df8;
    const { Gauge, Phone, ShieldCheck, Check, ArrowRight } = window.MkIcons;
    const U = window.MkUtils;
    const [topic, setTopic] = useState('');
    const [phone, setPhone] = useState('');
    const [agree, setAgree] = useState(true);
    const [sending, setSending] = useState(false);
    const [done, setDone] = useState(false);
    const phoneOk = U.isValidPhone(phone);
    function submit() {
      if (!phoneOk || !agree || sending) return;
      setSending(true);
      U.submitLead({ source: 'service', topic: topic, phone: phone }).then((r) => {
        setSending(false);
        if (r && r.ok === false) { window.alert('Не удалось отправить заявку. Позвоните нам: +7 (8142) 55-45-05'); return; }
        setDone(true);
      });
    }
    return (
      <section className="mk-section mk-section--subtle" id="service">
        <div className="mk-container">
          <div className="mk-service">
            <div className="mk-service__head">
              <span className="mk-service__ico"><Gauge size={26} /></span>
              <div>
                <p className="mk-overline" style={{ marginBottom: 6 }}>Сервис и ТО</p>
                <h2 className="mk-h2" style={{ margin: 0 }}>Записаться на сервис</h2>
                <p className="mk-lead" style={{ marginTop: 10 }}>Напишите, что нужно сделать, и оставьте номер — подберём удобное время и сориентируем по стоимости.</p>
              </div>
            </div>
            <Card variant="elevated" padding="lg" style={{ borderRadius: 'var(--radius-2xl)' }}>
              {done ? (
                <div className="mk-quiz__success">
                  <div className="mk-quiz__check"><Check size={32} stroke={3} /></div>
                  <h3 className="mk-quiz__q" style={{ margin: '8px 0' }}>Заявка на сервис принята!</h3>
                  <p style={{ color: 'var(--text-muted)', margin: 0 }}>Перезвоним на {phone} и согласуем время.</p>
                </div>
              ) : (
                <div className="mk-service__form">
                  <div className="mk-service__fields">
                    <Input label="Что вас интересует?" placeholder="Напр.: ТО, диагностика, замена масла"
                      value={topic} onChange={(e) => setTopic(e.target.value)} />
                    <Input label="Телефон" required type="tel" inputMode="tel" placeholder="+7 (___) ___-__-__"
                      icon={<Phone size={18} />} value={phone} onChange={(e) => setPhone(U.formatPhone(e.target.value))} />
                  </div>
                  <Button variant="primary" size="xl" fullWidth disabled={!phoneOk || !agree || sending}
                    iconRight={sending ? null : <ArrowRight size={20} />} onClick={submit}>
                    {sending ? 'Отправляем…' : 'Записаться на сервис'}
                  </Button>
                  <label className="mk-consent">
                    <input type="checkbox" checked={agree} onChange={(e) => setAgree(e.target.checked)} />
                    <span className="mk-consent__box" aria-hidden="true"></span>
                    <span className="mk-consent__txt">Я согласен на <a href="privacy.html" target="_blank" rel="noopener">обработку персональных данных</a></span>
                  </label>
                  <p className="mk-quiz__reassure"><ShieldCheck size={16} /> Перезвоним в течение 15 минут в рабочее время</p>
                </div>
              )}
            </Card>
          </div>
        </div>
      </section>
    );
  }
  window.ServiceBooking = ServiceBooking;

  /* ---------- Акции месяца ---------- */
  function Promos({ onCta }) {
    const React = window.React;
    const { useState, useEffect } = React;
    const { Button } = window.DesignSystem_019df8;
    const { Banknote, Repeat, ShieldCheck, Check, ArrowRight, X } = window.MkIcons;
    const P = [
      {
        icon: <Banknote size={24} />, t: 'Кредит 0,01%', d: 'Ставка на новые авто. Поможем с одобрением.',
        full: 'Льготная ставка 0,01% годовых на новые автомобили в наличии. Подберём программу под ваш доход, поможем собрать документы и подадим заявки сразу в несколько банков-партнёров.',
        bullets: ['Ставка 0,01% на отдельные модели', 'Первоначальный взнос — обсуждается', 'Заявки в несколько банков за раз', 'Решение по кредиту — в день обращения'],
      },
      {
        icon: <Repeat size={24} />, t: 'Трейд-ин +150 000 ₽', d: 'Доплата за вашу машину при обмене.',
        full: 'Сдайте свой автомобиль в счёт нового и получите дополнительные 150 000 ₽ к рыночной оценке. Оценка занимает 30 минут, всё оформление берём на себя.',
        bullets: ['+150 000 ₽ сверх рыночной оценки', 'Бесплатная оценка за 30 минут', 'Принимаем авто любых марок', 'Снятие с учёта и документы — на нас'],
      },
      {
        icon: <ShieldCheck size={24} />, t: 'КАСКО в подарок', d: 'При покупке автомобиля в кредит.',
        full: 'Оформляете новый автомобиль в кредит — полис КАСКО на первый год дарим. Защита от угона, ущерба и ДТП без лишних доплат.',
        bullets: ['Полис КАСКО на 1 год бесплатно', 'Только при покупке в кредит', 'Оформление прямо в салоне', 'Несколько страховых на выбор'],
      },
      {
        icon: <Check size={24} />, t: 'Первый взнос 0 ₽', d: 'Тест-драйв в день обращения.',
        full: 'Купите автомобиль в кредит без первоначального взноса. Приезжайте на тест-драйв в день обращения — и уезжайте на новой машине.',
        bullets: ['Первоначальный взнос — 0 ₽', 'Тест-драйв в день обращения', 'Подберём платёж под ваш бюджет', 'Помогаем с документами'],
      },
    ];
    const [active, setActive] = useState(null);
    return (
      <section className="mk-section mk-section--subtle" id="promos">
        <div className="mk-container">
          <p className="mk-overline">Акции месяца</p>
          <h2 className="mk-h2">Выгодные условия на покупку</h2>
          <div className="mk-promos">
            {P.map((p, i) => (
              <button type="button" className="mk-promo" key={p.t} onClick={() => setActive(i)}>
                <div className="mk-promo__top">
                  <span className="mk-promo__ico">{p.icon}</span>
                  <span className="mk-promo__more">Подробнее <ArrowRight size={14} /></span>
                </div>
                <h3 className="mk-promo__h">{p.t}</h3>
                <p className="mk-promo__p">{p.d}</p>
              </button>
            ))}
          </div>
          <div className="mk-promos__cta">
            <Button variant="primary" size="lg" iconRight={<ArrowRight size={18} />} onClick={onCta}>Получить выгоду</Button>
            <span className="mk-promos__note">Акции — пример. Уточните актуальные условия у менеджера.</span>
          </div>
        </div>
        {active !== null ? (
          <PromoModal promo={P[active]} onClose={() => setActive(null)} onCta={() => { setActive(null); onCta(); }} />
        ) : null}
      </section>
    );
  }
  window.Promos = Promos;

  /* Окно с описанием акции */
  function PromoModal({ promo, onClose, onCta }) {
    const React = window.React;
    const { useEffect } = React;
    const { Button } = window.DesignSystem_019df8;
    const { X, Check, ArrowRight } = window.MkIcons;
    useEffect(() => {
      const prev = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      const onKey = (e) => { if (e.key === 'Escape') onClose(); };
      window.addEventListener('keydown', onKey);
      return () => { document.body.style.overflow = prev; window.removeEventListener('keydown', onKey); };
    }, []);
    return (
      <div className="mk-modal" role="dialog" aria-modal="true" aria-label={promo.t}>
        <div className="mk-modal__backdrop" onClick={onClose}></div>
        <div className="mk-modal__panel mk-modal__panel--narrow">
          <header className="mk-modal__head">
            <div>
              <p className="mk-overline">Акция месяца</p>
              <h3 className="mk-modal__title">{promo.t}</h3>
            </div>
            <button type="button" className="mk-modal__close" onClick={onClose} aria-label="Закрыть"><X size={22} /></button>
          </header>
          <div className="mk-promodt">
            <span className="mk-promodt__ico">{promo.icon}</span>
            <p className="mk-promodt__p">{promo.full}</p>
            <ul className="mk-promodt__list">
              {promo.bullets.map((b) => (<li key={b}><Check size={18} stroke={2.4} /><span>{b}</span></li>))}
            </ul>
            <div className="mk-promodt__cta">
              <Button variant="primary" size="lg" fullWidth iconRight={<ArrowRight size={18} />} onClick={onCta}>
                Оставить заявку
              </Button>
            </div>
            <p className="mk-promodt__fine">Условия — пример для демонстрации. Точные параметры акции уточняйте у менеджера салона.</p>
          </div>
        </div>
      </div>
    );
  }
  window.PromoModal = PromoModal;

  /* ---------- Trust ---------- */
  function Trust() {
    const React = window.React;
    const { useState } = React;
    const { Card } = window.DesignSystem_019df8;
    const { ShieldCheck, Car, Check, StarFill, MapPin, Clock, Gallery, ChevronLeft, ChevronRight, X } = window.MkIcons;
    const PHOTOS = [
      ['photos/gallery/g12.jpg', 'Клиенты в день выдачи нового автомобиля в MARCAR'],
      ['photos/gallery/g13.jpg', 'Счастливый владелец нового автомобиля'],
      ['photos/gallery/g2.jpg', 'Менеджер вручает клиенту документы MARCAR'],
      ['photos/gallery/g3.jpg', 'Ключи от нового автомобиля в шоуруме'],
      ['photos/gallery/g9.jpg', 'Шоурум MARCAR — модельный ряд в наличии'],
      ['photos/gallery/g6.jpg', 'Новый GAC S7 в салоне MARCAR'],
      ['photos/gallery/g10.jpg', 'Собственный сервис и зона ТО'],
      ['photos/gallery/g11.jpg', 'Мастер на плановом ТО автомобиля'],
    ];
    const [lb, setLb] = useState(-1);
    const openLb = (i) => setLb(i);
    const closeLb = () => setLb(-1);
    const stepLb = (d) => setLb((v) => (v + d + PHOTOS.length) % PHOTOS.length);
    React.useEffect(() => {
      if (lb < 0) return undefined;
      const onKey = (e) => {
        if (e.key === 'Escape') setLb(-1);
        else if (e.key === 'ArrowLeft') stepLb(-1);
        else if (e.key === 'ArrowRight') stepLb(1);
      };
      window.addEventListener('keydown', onKey);
      return () => window.removeEventListener('keydown', onKey);
    }, [lb]);
    const STEPS = [
      ['01', 'Заявка и подбор', 'Оставляете номер — подбираем модель, комплектацию и условия под ваш бюджет.'],
      ['02', 'Тест-драйв и оценка', 'Смотрите авто вживую, проводим тест-драйв и оцениваем вашу машину в трейд-ин.'],
      ['03', 'Оформление и выдача', 'Помогаем с кредитом, страховкой и документами — и передаём ключи.'],
    ];
    const FACTS = [
      ['4,8', 'рейтинг на Яндекс / 2ГИС'],
      ['3', 'официальных бренда'],
      ['50+', 'авто в наличии'],
      ['Свой', 'сервис и ТО'],
    ];
    const REVIEWS = [
      { n: 'Алексей', i: 'А', t: 'Приехал просто посмотреть, дали спокойно сесть и проехать. Не давили. Машину забрал в тот же месяц, по той цене, что и обсуждали.' },
      { n: 'Марина', i: 'М', t: 'Помогли с трейд-ин и кредитом, всё объяснили по платежам. Отдельное спасибо менеджеру за то, что был на связи в мессенджере.' },
    ];
    const GUAR = [
      [<ShieldCheck size={22} />, 'Официальный дилер', 'Прямые поставки и гарантия марки'],
      [<Check size={22} />, 'Договор и документы', 'Прозрачная сделка, всё на руки'],
      [<Car size={22} />, 'Сервис на месте', 'ТО и обслуживание в Петрозаводске'],
    ];
    return (
      <section className="mk-section mk-section--subtle" id="trust">
        <div className="mk-container">
          <p className="mk-overline">Салон MARCAR</p>
          <div className="mk-gallery" style={{ marginTop: 8 }}>
            <div className="mk-gallery__top">
              <div>
                <h3 className="mk-gallery__h">Галерея салона</h3>
              </div>
              <button className="mk-gallery__all" onClick={() => openLb(0)}>
                <Gallery size={17} /> Смотреть галерею салона
                <span className="mk-gallery__count">{PHOTOS.length}</span>
              </button>
            </div>
            <div className="mk-gallery__strip">
              {PHOTOS.map(([src, alt], i) => (
                <button className="mk-gallery__cell" key={src} onClick={() => openLb(i)} aria-label={alt}>
                  <img src={src} alt={alt} loading="lazy" />
                </button>
              ))}
            </div>
          </div>

          <div className="mk-trust__cols mk-trust__cols--slim" style={{ marginTop: 28 }}>
            <div className="mk-guarantee">
              {GUAR.map(([ico, b, s]) => (
                <div className="mk-guarantee__item" key={b}>
                  {ico}
                  <div><b>{b}</b><span>{s}</span></div>
                </div>
              ))}
              <div className="mk-map">
                <a className="mk-map__slot mk-map__photo" href="https://yandex.ru/maps/-/CTa~VE08" target="_blank" rel="noopener" aria-label="Открыть MARCAR на Яндекс.Картах">
                  <img src="photos/facade.jpg" alt="Автосалон MARCAR — фасад, Петрозаводск" loading="lazy" />
                  <span className="mk-map__pin"><MapPin size={15} /> Как проехать · Яндекс.Карты</span>
                </a>
                <div className="mk-map__info">
                  <div className="mk-map__row"><MapPin size={17} /> г. Петрозаводск, Лесной проспект, 85</div>
                  <div className="mk-map__row"><Clock size={17} /> Ежедневно, 9:00–21:00</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {lb >= 0 ? (
          <div className="mk-lb" onClick={closeLb} role="dialog" aria-modal="true">
            <button className="mk-lb__close" onClick={closeLb} aria-label="Закрыть"><X size={22} /></button>
            <button className="mk-lb__nav mk-lb__nav--prev" onClick={(e) => { e.stopPropagation(); stepLb(-1); }} aria-label="Предыдущее фото"><ChevronLeft size={26} /></button>
            <figure className="mk-lb__stage" onClick={(e) => e.stopPropagation()}>
              <img className="mk-lb__img" src={PHOTOS[lb][0]} alt={PHOTOS[lb][1]} />
              <figcaption className="mk-lb__cap">{PHOTOS[lb][1]}<span>{lb + 1} / {PHOTOS.length}</span></figcaption>
            </figure>
            <button className="mk-lb__nav mk-lb__nav--next" onClick={(e) => { e.stopPropagation(); stepLb(1); }} aria-label="Следующее фото"><ChevronRight size={26} /></button>
          </div>
        ) : null}
      </section>
    );
  }
  window.Trust = Trust;
})();