/* Маркар landing — розыгрыш iPhone 17 + призы (вариант 1c).
   Секция на странице + промо-поп-ап. Форма-заявка = билет участника.
   Приём заявок до 1 августа, итоги 2 августа 18:00 в ВК.
   Side-effect-safe (см. Header.jsx): только определяет window.*, ничего не
   читает и не монтирует на этапе eval. */
(function () {
  var RAFFLE_TARGET = new Date(2026, 7, 1, 23, 59, 0).getTime(); // приём заявок до 1 августа 2026
  var POP_KEY = 'mk_raffle_pop';   // поп-ап показан/закрыт в этой сессии
  var JOIN_KEY = 'mk_raffle_join'; // пользователь уже участвует

  function pad(n) { return String(n).padStart(2, '0'); }
  /* Номер билета: 4 цифры из криптослучайного источника (1000–9999).
     Официальная нумерация — по журналу заявок Организатора (п. 5.1 правил),
     номер дублируется в заявке Formspree, поэтому всегда сопоставим с участником. */
  function genTicket() {
    var n;
    try {
      var buf = new Uint32Array(1);
      window.crypto.getRandomValues(buf);
      n = 1000 + (buf[0] % 9000);
    } catch (e) { n = 1000 + Math.floor(Math.random() * 9000); }
    return String(n);
  }

  /* ---------- Обратный отсчёт ---------- */
  function useCountdown() {
    const React = window.React;
    const { useState, useEffect } = React;
    const calc = () => {
      const diff = Math.max(0, RAFFLE_TARGET - Date.now());
      return {
        d: Math.floor(diff / 86400000),
        h: Math.floor((diff % 86400000) / 3600000),
        m: Math.floor((diff % 3600000) / 60000),
        s: Math.floor((diff % 60000) / 1000),
      };
    };
    const [t, setT] = useState(calc);
    useEffect(() => {
      const id = window.setInterval(() => setT(calc()), 1000);
      return () => window.clearInterval(id);
    }, []);
    return t;
  }

  function CountdownBoxes() {
    const React = window.React;
    const t = useCountdown();
    const cells = [[t.d, 'дней'], [pad(t.h), 'часов'], [pad(t.m), 'минут'], [pad(t.s), 'секунд']];
    return (
      <div className="rf-count">
        {cells.map(([n, l], i) => (
          <div className="rf-count__box" key={i}>
            <div className="rf-count__n">{n}</div>
            <div className="rf-count__l">{l}</div>
          </div>
        ))}
      </div>
    );
  }

  function CountdownLine() {
    const React = window.React;
    const t = useCountdown();
    const dw = window.MkUtils.plural(t.d, 'день', 'дня', 'дней');
    return <p className="rf-card__cd">{t.d} {dw} {pad(t.h)}:{pad(t.m)}:{pad(t.s)}</p>;
  }

  /* ---------- Форма участия (используется в секции и в поп-апе) ---------- */
  function RaffleForm({ source, compact }) {
    const React = window.React;
    const { useState } = React;
    const { Button, Input } = window.DesignSystem_019df8;
    const { Phone, ArrowRight, ShieldCheck, Check } = window.MkIcons;
    const U = window.MkUtils;
    const [name, setName] = useState('');
    const [phone, setPhone] = useState('');
    const [vk, setVk] = useState('');
    const [agree, setAgree] = useState(true);
    const [sending, setSending] = useState(false);
    const [ticket, setTicket] = useState(null);
    const phoneOk = U.isValidPhone(phone);

    function submit() {
      if (!phoneOk || !agree || sending) return;
      setSending(true);
      /* Номер билета генерируем ДО отправки и кладём в заявку —
         в Formspree заявка приходит сразу с номером билета участника. */
      const num = genTicket();
      U.submitLead({
        _subject: 'Розыгрыш МАРКАР — билет № ' + num,
        source: source || 'raffle',
        name: name,
        phone: phone,
        vk_profile: vk,
        ticket: num,
        intent: 'raffle',
        prize: 'Розыгрыш iPhone 17 + 4 приза',
      })
        .then((r) => {
          setSending(false);
          if (r && r.ok === false) { window.alert('Не удалось отправить заявку. Позвоните нам: +7 (8142) 55-45-05'); return; }
          setTicket(num);
          try { window.localStorage.setItem(JOIN_KEY, num); } catch (e) {}
          U.mkTrack('raffle_join', { source: source || 'raffle', ticket: num });
        });
    }

    if (ticket) {
      return (
        <div className="rf-done">
          <div className="rf-done__ticket">
            <span className="rf-done__lbl">Билет участника</span>
            <div className="rf-done__num">№ {ticket}</div>
          </div>
          <h3 className="rf-done__h">Вы в игре{name ? ', ' + name : ''}!</h3>
          <p className="rf-done__p">Заявка принята. Чтобы билет засчитался — подпишитесь на <a href="https://vk.com/marcar10" target="_blank" rel="noopener" style={{ color: 'var(--accent-press)' }}>vk.com/marcar10</a>. Итоги 2 августа в 18:00 — прямой эфир ВК, победителей выберет генератор случайных чисел.</p>
        </div>
      );
    }

    return (
      <div className="rf-form">
        <Input label={compact ? null : 'Имя'} placeholder="Как к вам обращаться" value={name}
          onChange={(e) => setName(e.target.value)} />
        <Input label={compact ? null : 'Телефон'} required type="tel" inputMode="tel"
          placeholder="+7 (___) ___-__-__" icon={<Phone size={18} />} value={phone}
          onChange={(e) => setPhone(U.formatPhone(e.target.value))} />
        <Input label={compact ? null : 'Профиль ВКонтакте'} placeholder="vk.com/ваш_профиль (ускорит проверку подписки)"
          value={vk} onChange={(e) => setVk(e.target.value)} />
        <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>
        <Button variant="primary" size="lg" fullWidth disabled={!phoneOk || !agree || sending}
          iconRight={sending ? null : <ArrowRight size={18} />} onClick={submit}>
          {sending ? 'Отправляем…' : 'Участвовать — получить билет'}
        </Button>
        <p className="rf-note"><ShieldCheck size={15} />После заявки пришлём номер вашего билета участника.</p>
      </div>
    );
  }
  window.RaffleForm = RaffleForm;

  /* ---------- Сетка призов ---------- */
  function PrizeGrid({ onRules }) {
    const React = window.React;
    return (
      <div className="rf-grid">
        <div className="rf-grid__cell rf-grid__cell--main">
          <div className="rf-grid__row" style={{ justifyContent: 'center' }}>
            <span className="rf-grid__pl">1 место · главный приз · iPhone 17</span>
          </div>
          <div className="rf-hero" style={{ marginTop: 10 }}>
            <button type="button" className="rf-hero__btn" onClick={onRules} aria-label="Описание и правила акции">
              <img src="assets/raffle-prize.png" alt="iPhone 17 — главный приз" />
              <span className="rf-hero__cap"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round"><circle cx="12" cy="12" r="10" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" /></svg>Нажмите — описание и правила</span>
            </button>
          </div>
          <div className="rf-grid__t" style={{ marginTop: 10 }}>iPhone 17</div>
          <p className="rf-grid__v" style={{ margin: 0 }}>Новый смартфон достанется одному из участников розыгрыша.</p>
        </div>
        <div className="rf-grid__cell">
          <span className="rf-grid__pl">2 место</span>
          <span className="rf-grid__t">Беспроводная колонка JBL</span>
        </div>
        <div className="rf-grid__cell">
          <span className="rf-grid__pl">3 место</span>
          <span className="rf-grid__t">Пауэрбанк + автодержатель<small style={{ display: 'block', fontWeight: 500, fontSize: 12, color: 'var(--text-muted)', marginTop: 3 }}>с беспроводной зарядкой</small></span>
        </div>
        <div className="rf-grid__cell">
          <span className="rf-grid__pl">4 место</span>
          <span className="rf-grid__t">Сертификат на техническое обслуживание</span>
        </div>
        <div className="rf-grid__cell">
          <span className="rf-grid__pl">5 место</span>
          <span className="rf-grid__t">Сертификат на мойку автомобиля</span>
        </div>
      </div>
    );
  }

  /* ---------- Модалка с правилами ---------- */
  function RulesModal({ onClose }) {
    const React = window.React;
    const { useEffect } = React;
    const { X } = 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="Правила акции">
        <div className="mk-modal__backdrop" onClick={onClose}></div>
        <div className="mk-modal__panel mk-modal__panel--narrow" style={{ height: '88vh', maxHeight: '88vh' }}>
          <header className="mk-modal__head">
            <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>
          <div className="rf-rules" style={{ flex: '1 1 0', minHeight: 0 }}>
            <p className="rf-rules__intro">Правила проведения рекламной акции «Розыгрыш iPhone от автоцентра МАРКАР».</p>

            <h4>1. Общие положения</h4>
            <p>1.1. Организатор акции: ООО «АЦ МАРКАР», ИНН 9713029697, ОГРН 1257700360345, г. Петрозаводск, Лесной проспект, 85 (далее — Организатор).</p>
            <p>1.2. Акция является стимулирующим рекламным мероприятием, не является лотереей, участие бесплатное и не связано с внесением платы.</p>
            <p>1.3. Территория проведения: г. Петрозаводск, Республика Карелия. Информация об акции — на сайте marcar-ptz.ru и в официальной группе ВКонтакте vk.com/marcar10.</p>

            <h4>2. Сроки проведения</h4>
            <p>2.1. Приём заявок: с 00:00 5 июля по 23:59 1 августа 2026 г.</p>
            <p>2.2. Определение победителей: 2 августа 2026 г. в 18:00 в прямом эфире в группе ВКонтакте.</p>
            <p>2.3. Выдача призов: с 3 августа по 2 сентября 2026 г.</p>

            <h4>3. Условия участия</h4>
            <p>3.1. Участником может стать дееспособное физическое лицо старше 18 лет, проживающее на территории РФ.</p>
            <p>3.2. Для участия необходимо выполнить оба условия:</p>
            <ul>
              <li>а) быть подписанным на официальную группу Организатора ВКонтакте (vk.com/marcar10) на момент подведения итогов;</li>
              <li>б) заполнить заявку в разделе «Розыгрыш» на сайте marcar-ptz.ru с указанием имени и номера телефона (ссылка на профиль ВКонтакте — по желанию, ускоряет проверку подписки).</li>
            </ul>
            <p>3.3. Дополнительный шанс: участник, записавшийся на тест-драйв автомобиля в АЦ МАРКАР через сайт или по телефону и прошедший его в период акции, получает второй регистрационный номер.</p>
            <p>3.4. Один участник может подать только одну заявку (не считая дополнительного номера за тест-драйв). Дубли исключаются из розыгрыша.</p>
            <p>3.5. В акции не могут участвовать сотрудники Организатора и члены их семей.</p>

            <h4>4. Призовой фонд</h4>
            <p>4.1. Призовой фонд (5 призовых мест):</p>
            <ul>
              <li>1 место — смартфон Apple iPhone 17 (стоимость подтверждается кассовым чеком Организатора);</li>
              <li>2 место — беспроводная колонка JBL (стоимость ~8 000 ₽);</li>
              <li>3 место — пауэрбанк и автодержатель с беспроводной зарядкой (стоимость ~6 000 ₽);</li>
              <li>4–5 места — сертификаты номиналом 3 000 ₽ на услуги ТО/мойки в АЦ МАРКАР.</li>
            </ul>
            <p>4.2. Призы не подлежат обмену на денежный эквивалент. Цвет и комплектация смартфона определяются Организатором исходя из наличия. Сертификаты именные, передаче третьим лицам не подлежат, срок действия — 3 месяца с даты вручения.</p>

            <h4>5. Порядок определения победителей</h4>
            <p>5.1. Каждой корректной заявке присваивается порядковый номер.</p>
            <p>5.2. Победители определяются с помощью генератора случайных чисел в прямом эфире 2 августа 2026 г. Розыгрыш проводится от 5 места к 1 месту.</p>
            <p>5.3. Перед вручением приза Организатор проверяет выполнение условий п. 3.2. Если участник не подписан на группу или данные заявки недостоверны — определяется новый победитель тем же способом.</p>
            <p>5.4. Результаты публикуются в группе ВКонтакте и на сайте в течение 24 часов после эфира.</p>

            <h4>6. Получение призов</h4>
            <p>6.1. С победителями Организатор связывается по телефону и/или ВКонтакте в течение 3 рабочих дней.</p>
            <p>6.2. Призы вручаются лично в автосалоне МАРКАР по адресу: г. Петрозаводск, Лесной проспект, 85, при предъявлении паспорта.</p>
            <p>6.3. Если победитель не выходит на связь в течение 7 календарных дней или не забирает приз до 2 сентября 2026 г., приз передаётся резервному победителю.</p>
            <p>6.4. Приз стоимостью свыше 4 000 ₽ облагается НДФЛ по ставке 35% с суммы превышения в соответствии с законодательством РФ.</p>

            <h4>7. Персональные данные</h4>
            <p>7.1. Отправляя заявку, участник даёт согласие на обработку персональных данных в соответствии с ФЗ-152 «О персональных данных» в целях проведения акции и информирования об акциях Организатора.</p>
            <p>7.2. Победители соглашаются на публикацию имени и фотографии вручения приза в ресурсах Организатора.</p>

            <h4>8. Прочее</h4>
            <p>8.1. Организатор вправе вносить изменения в правила с публикацией на сайте.</p>
            <p>8.2. Участие в акции означает согласие с настоящими правилами.</p>

            <p className="rf-rules__fine">ООО «АЦ МАРКАР» · ИНН 9713029697 · ОГРН 1257700360345. Акция не является лотереей. Подробности — у менеджеров салона.</p>
          </div>
        </div>
      </div>
    );
  }
  window.RulesModal = RulesModal;

  /* ---------- Секция розыгрыша ---------- */
  function Raffle() {
    const React = window.React;
    const { useState } = React;
    const { ShieldCheck } = window.MkIcons;
    const [rulesOpen, setRulesOpen] = useState(false);
    return (
      <section className="mk-section" id="raffle">
        <div className="mk-container">
          <p className="mk-overline">Розыгрыш · главный приз iPhone 17</p>
          <h2 className="mk-h2">Разыгрываем iPhone 17 и ещё 4 приза</h2>
          <p className="mk-lead">Оставьте заявку — участвуйте в розыгрыше iPhone 17, колонок JBL, сертификатов на сервис и других призов. Приём заявок до 1 августа, итоги 2 августа в прямом эфире ВКонтакте.</p>

          <div className="mk-raffle__wrap">
            <PrizeGrid onRules={() => setRulesOpen(true)} />

            <div className="rf-card">
              <div className="rf-card__top">
                <div>
                  <p className="rf-card__lbl">До конца приёма заявок</p>
                  <CountdownLine />
                </div>
                <span className="rf-badge">до 1 августа</span>
              </div>
              <div className="rf-steps">
                <a className="rf-steps__vk" href="https://vk.com/marcar10" target="_blank" rel="noopener">1 · Подпишись на группу ВКонтакте →</a>
                <p className="rf-steps__2"><b>2 · Оставь заявку ниже</b> — это твой билет участника.</p>
                <p className="rf-steps__boost"><ShieldCheck size={15} />Доп. шанс: тест-драйв GAC, Soueast или Evolute в период акции — второй билет.</p>
              </div>
              <RaffleForm source="raffle_section" />
              <button type="button" className="rf-rules-link" onClick={() => setRulesOpen(true)}>Подробные условия и правила акции →</button>
            </div>
          </div>
          {rulesOpen ? <RulesModal onClose={() => setRulesOpen(false)} /> : null}
        </div>
      </section>
    );
  }
  window.Raffle = Raffle;

  /* ---------- Промо-поп-ап ---------- */
  function RafflePopup() {
    const React = window.React;
    const { useState, useEffect } = React;
    const { X } = window.MkIcons;
    const [open, setOpen] = useState(false);
    const [rulesOpen, setRulesOpen] = useState(false);

    function alreadyHandled() {
      try { return !!window.localStorage.getItem(POP_KEY) || !!window.localStorage.getItem(JOIN_KEY); } catch (e) { return false; }
    }

    useEffect(() => {
      if (alreadyHandled()) return;
      let shown = false;
      const openOnce = () => {
        if (shown || alreadyHandled()) return;
        shown = true;
        setOpen(true);
      };
      const timer = window.setTimeout(openOnce, 18000);
      const onLeave = (e) => { if (e.clientY <= 0) openOnce(); };
      document.addEventListener('mouseout', onLeave);
      return () => { window.clearTimeout(timer); document.removeEventListener('mouseout', onLeave); };
    }, []);

    useEffect(() => {
      if (!open) return;
      const prev = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      const onKey = (e) => { if (e.key === 'Escape') close(); };
      window.addEventListener('keydown', onKey);
      return () => { document.body.style.overflow = prev; window.removeEventListener('keydown', onKey); };
    }, [open]);

    function close() {
      try { window.localStorage.setItem(POP_KEY, '1'); } catch (e) {}
      setOpen(false);
    }

    if (!open) return null;
    return (
      <div className="rf-pop" role="dialog" aria-modal="true" aria-label="Розыгрыш призов">
        <div className="rf-pop__backdrop" onClick={close}></div>
        <div className="rf-pop__panel">
          <button type="button" className="rf-pop__close" onClick={close} aria-label="Закрыть"><X size={20} /></button>
          <div className="rf-pop__media">
            <button type="button" className="rf-hero__btn" onClick={() => setRulesOpen(true)} aria-label="Описание и правила">
              <img src="assets/raffle-prize.png" alt="iPhone 17 — главный приз" />
            </button>
            <span className="rf-badge rf-pop__tag">Главный приз · iPhone 17</span>
          </div>
          <div className="rf-pop__body">
            <h3 className="rf-pop__h">Разыгрываем iPhone 17 и ещё призы</h3>
            <p className="rf-pop__p">Колонка JBL, пауэрбанк, сертификаты на ТО и мойку. Оставьте номер — получите билет участника. Приём до 1 августа.</p>
            <div style={{ marginTop: 14 }}>
              <CountdownBoxes />
            </div>
            <div style={{ marginTop: 14 }}>
              <RaffleForm source="raffle_popup" compact />
            </div>
            <button type="button" className="rf-rules-link" onClick={() => setRulesOpen(true)} style={{ marginTop: 12 }}>Подробные условия и правила →</button>
          </div>
        </div>
        {rulesOpen ? <RulesModal onClose={() => setRulesOpen(false)} /> : null}
      </div>
    );
  }
  window.RafflePopup = RafflePopup;
})();