/* Маркар landing — hero (first screen). Side-effect-safe (see Header.jsx).
   3D-машина как полупрозрачный фон обложки; текст и CTA поверх неё.
   Подбор («Что вас интересует») — второй экран (компонент Quiz). */
(function () {
  const WA = 'https://cdn.simpleicons.org/whatsapp/ffffff';
  const TG = 'https://cdn.simpleicons.org/telegram/ffffff';

  const trust = [
    ['50+', 'авто в наличии'],
    ['3', 'официальных бренда'],
    ['Свой', 'сервис и ТО'],
  ];

  function Hero({ onQuiz, onModels }) {
    const React = window.React;
    const { Button, Badge } = window.DesignSystem_019df8;
    const { ArrowRight, Check, Clock } = window.MkIcons;
    const { MessageCircle, Send } = window.MkIcons;
    const mvRef = React.useRef(null);

    React.useEffect(() => {
      const mv = mvRef.current;
      if (!mv) return;
      const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      // Интерьерный радиус = доля от размера модели (не зависит от состояния камеры).
      // Меньше — глубже в салоне. Начальный радиус в атрибуте camera-orbit должен совпадать.
      function start() {
        let len = 58, cx = 13.1, cy = 9.11, cz = -29.04;
        try {
          const d = mv.getDimensions(); if (d) len = Math.max(d.x, d.y, d.z);
          const c = mv.getCameraTarget(); if (c) { cx = c.x; cy = c.y; cz = c.z; }
        } catch (e) {}
        // цель — центр салона на уровне глаз; маленький радиус = камера ВНУТРИ салона
        mv.cameraTarget = cx.toFixed(2) + 'm ' + (cy + len * 0.02).toFixed(2) + 'm ' + cz.toFixed(2) + 'm';
        const r = (len * 0.08).toFixed(2) + 'm';
        mv.minFieldOfView = '30deg';
        mv.interpolationDecay = 0;
        mv.fieldOfView = '82deg';                       // широкий угол — весь салон в кадре
        mv.cameraOrbit = '0deg 88deg ' + r;             // изнутри, на уровне глаз
        mv.jumpCameraToGoal && mv.jumpCameraToGoal();
        requestAnimationFrame(function () {
          mv.style.opacity = '1';
          mv.interpolationDecay = 220;
          if (!reduce) {
            mv.setAttribute('auto-rotate', '');
            mv.setAttribute('auto-rotate-delay', '0');
            mv.setAttribute('rotation-per-second', '8deg');
          }
        });
      }
      function onLoad() { requestAnimationFrame(() => requestAnimationFrame(start)); }
      if (mv.loaded) onLoad(); else mv.addEventListener('load', onLoad);
      return () => { mv.removeEventListener('load', onLoad); };
    }, []);
    return (
      <section className="mk-hero" id="top">
        <div className="mk-hero__glow" aria-hidden="true"></div>
        <div className="mk-hero__bg3d" aria-hidden="true">
          <model-viewer
            ref={mvRef}
            src="assets/gac_empow.glb"
            interaction-prompt="none"
            disable-zoom
            disable-tap
            environment-image="neutral"
            tone-mapping="aces"
            shadow-intensity="0"
            exposure="1.35"
            camera-orbit="-30deg 80deg 108%"
            field-of-view="38deg"
            style={{ width: '100%', height: '100%', display: 'block', pointerEvents: 'none', backgroundColor: 'transparent', opacity: 0, transition: 'opacity .6s ease' }}
          ></model-viewer>
        </div>

        <div className="mk-container mk-hero__inner">
          <div className="mk-hero__copy">
            <div className="mk-hero__badges">
              <Badge variant="solid" size="md">Официальный дилер</Badge>
              <Badge variant="available" size="md" dot>Авто в наличии</Badge>
            </div>
            <h1 className="mk-hero__title">
              Новые авто в наличии —<br /><span className="accent">заберите уже сегодня</span>
            </h1>
            <p className="mk-hero__sub">
              MARCAR в Петрозаводске — официальный дилер <b>GAC</b>, <b>Soueast</b> и{' '}
              <b>Evolute</b>. Новые авто, машины с пробегом и собственный сервис.
              Покажем вживую, поможем с кредитом и трейд-ин.
            </p>

            <ul className="mk-hero__offers">
              <li><Check size={17} /> Тест-драйв в день обращения</li>
              <li><Check size={17} /> Трейд-ин с оценкой за 30 минут</li>
              <li><Check size={17} /> Поможем с кредитом и рассрочкой</li>
            </ul>

            <div className="mk-hero__cta">
              <Button variant="primary" size="xl" fullWidth iconRight={<ArrowRight size={20} />} onClick={onQuiz}>
                Подобрать за пару минут
              </Button>
              <Button variant="secondary" size="lg" fullWidth onClick={onModels}>
                Смотреть модели в наличии
              </Button>
            </div>

            <div className="mk-hero__contact">
              <a className="mk-hero__tel" href="tel:+78142554505">+7 (8142) 55-45-05</a>
              <a className="mk-msgr mk-msgr--max" href="https://max.ru/+79114094429" target="_blank" rel="noopener" aria-label="MAX"><MessageCircle size={22} /></a>
              <a className="mk-msgr mk-msgr--tg" href="https://t.me/+79114094429" target="_blank" rel="noopener" aria-label="Telegram"><Send size={22} /></a>
            </div>
            <p className="mk-hero__hours"><Clock size={15} /> Ежедневно, 9:00–21:00 · Петрозаводск, Лесной проспект, 85</p>

            <div className="mk-hero__stats">
              {trust.map(([n, l]) => (
                <div className="mk-stat" key={l}>
                  <div className="mk-stat__n">{n}</div>
                  <div className="mk-stat__l">{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    );
  }
  window.Hero = Hero;
})();