/**
 * PASS24.online — Виджет «Планшет в подарок»
 * Подключение: <script src="pass24-widget.js"></script>
 * Форма Битрикс24: замените содержимое блока #_p24form
 */
(function () {
  'use strict';

  /* Google Fonts */
  var lnk = document.createElement('link');
  lnk.rel  = 'stylesheet';
  lnk.href = 'https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&display=swap';
  document.head.appendChild(lnk);

  /* ── СТИЛИ ── */
  var st = document.createElement('style');
  st.textContent =
    '#_p24btn,#_p24tip,#_p24ov,#_p24modal,#_p24btn *,#_p24tip *,#_p24ov *{box-sizing:border-box;margin:0;padding:0;font-family:"Montserrat",Arial,sans-serif;line-height:normal;}' +

    /* кнопка — полупрозрачная по умолчанию */
    '#_p24btn{position:fixed;left:10px;top:50%;transform:translateY(-50%);z-index:2147483640;width:54px;height:54px;border-radius:50%;background:#E9403B;box-shadow:0 4px 24px rgba(233,64,59,.4),0 2px 8px rgba(0,0,0,.2);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.45;transition:opacity .3s ease,left .35s cubic-bezier(.34,1.3,.64,1),box-shadow .3s ease;}' +
    /* уполовинена в край */
    '#_p24btn.collapsed{left:-20px;}' +
    /* наведение или тултип открыт — полная непрозрачность, на месте */
    '#_p24btn:hover,#_p24btn.tip-open{opacity:1;left:10px;box-shadow:0 6px 28px rgba(233,64,59,.6),0 2px 8px rgba(0,0,0,.25);}' +
    '#_p24btn svg{width:30px;height:30px;display:block;}' +
    '#_p24btn::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2.5px solid #E9403B;opacity:0;animation:_p24p 2.4s ease-out infinite;}' +
    '#_p24btn.collapsed::after{animation:none;}' +
    '@keyframes _p24p{0%{opacity:.6;transform:scale(1)}80%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}' +

    /* тултип */
    '#_p24tip{position:fixed;left:64px;top:50%;transform:translateY(-50%) translateX(-340px);z-index:2147483639;background:#E9403B;border-radius:12px;padding:10px 36px 10px 20px;box-shadow:4px 4px 24px rgba(233,64,59,.4);cursor:pointer;opacity:0;pointer-events:none;transition:transform .45s cubic-bezier(.25,.8,.25,1),opacity .35s ease;white-space:nowrap;}' +
    '#_p24tip.on{transform:translateY(-50%) translateX(0);opacity:1;pointer-events:auto;}' +
    '#_p24l1{display:block;font-size:13px;font-weight:700;line-height:1.4;color:#fff;}' +
    '#_p24l2{display:block;font-size:11.5px;font-weight:600;line-height:1.35;color:rgba(255,255,255,.88);margin-top:5px;opacity:0;transform:translateY(5px);transition:opacity .3s ease .1s,transform .3s ease .1s;}' +
    '#_p24tip.on2 #_p24l2{opacity:1;transform:translateY(0);}' +

    /* крестик тултипа — внутри, справа по центру */
    '#_p24tip-x{position:absolute;top:50%;right:10px;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.25);border:none;cursor:pointer;color:#fff;font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s,transform .15s;line-height:1;}' +
    '#_p24tip-x:hover{background:rgba(255,255,255,.45);transform:translateY(-50%) scale(1.15);}' +

    /* оверлей */
    '#_p24ov{position:fixed;inset:0;z-index:2147483641;background:rgba(10,8,24,.58);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:flex-start;padding:20px;opacity:0;pointer-events:none;transition:opacity .28s;}' +
    '#_p24ov.on{opacity:1;pointer-events:all;}' +

    /* модалка */
    '#_p24modal{background:#fff;border-radius:18px;width:100%;max-width:360px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 70px rgba(0,0,0,.32);transform:translateX(-30px) scale(.97);transition:transform .35s cubic-bezier(.34,1.3,.64,1);font-family:Arial,sans-serif;}' +
    '#_p24ov.on #_p24modal{transform:none;}' +
    '#_p24hd{background:linear-gradient(140deg,#E9403B 0%,#c42e2a 100%);border-radius:18px 18px 0 0;padding:20px;position:relative;}' +
    '#_p24logo{display:flex;align-items:center;gap:10px;margin-bottom:16px;}' +
    '#_p24lt{font-weight:800;font-size:17px;color:#fff;letter-spacing:-.3px;}' +
    '#_p24lt em{font-style:normal;color:rgba(255,255,255,.68);}' +
    '#_p24tab{display:flex;justify-content:center;margin-bottom:14px;}' +
    '#_p24tab svg{filter:drop-shadow(0 8px 20px rgba(0,0,0,.35));}' +
    '#_p24badge{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:10px 14px;color:#fff;font-size:13px;font-weight:700;line-height:1.45;}' +
    '#_p24badge b{display:block;font-size:15px;margin-bottom:3px;}' +
    '#_p24x{position:absolute;top:14px;right:15px;background:rgba(255,255,255,.22);border:none;cursor:pointer;width:30px;height:30px;border-radius:50%;color:#fff;font-size:16px;line-height:30px;text-align:center;padding:0;transition:background .18s;}' +
    '#_p24x:hover{background:rgba(255,255,255,.4);}' +
    '#_p24body{padding:20px;}' +
    '#_p24body>p{font-size:13.5px;line-height:1.65;color:#333;margin:0 0 12px;font-family:Arial,sans-serif;}' +
    '#_p24body a{color:#E9403B;font-weight:600;}' +
    '#_p24note{font-size:12px;color:#777;line-height:1.55;border-left:3px solid #E9403B;padding-left:10px;margin:0 0 20px;}' +
    '#_p24form{border-radius:12px;overflow:hidden;}' +

    '@media(max-width:600px){' +
      '#_p24btn{width:46px;height:46px;left:8px;}' +
      '#_p24btn.collapsed{left:-16px;}' +
      '#_p24btn:hover,#_p24btn.tip-open{left:8px;}' +
      '#_p24btn svg{width:25px;height:25px;}' +
      '#_p24tip{left:54px;white-space:normal;max-width:calc(100vw - 60px);}' +
      '#_p24ov{align-items:flex-end;justify-content:center;padding:0;}' +
      '#_p24modal{max-width:100%;border-radius:18px 18px 0 0;max-height:85vh;}' +
    '}';
  document.head.appendChild(st);

  /* ── SVG ── */
  var ICON =
    '<svg viewBox="0 0 32 32" width="30" height="30" fill="none">' +
    '<rect x="6" y="1" width="20" height="30" rx="3.5" fill="white" opacity=".95"/>' +
    '<rect x="8" y="3" width="16" height="24" rx="2" fill="#0f0f1e"/>' +
    '<rect x="8" y="3" width="16" height="6" fill="#E9403B"/>' +
    '<text x="9" y="8.2" font-family="Arial" font-weight="bold" font-size="3.2" fill="white">PASS24</text>' +
    '<rect x="9.5" y="11" width="6" height="5" rx="1" fill="rgba(255,255,255,.22)"/>' +
    '<rect x="17" y="11" width="5" height="5" rx="1" fill="rgba(255,255,255,.15)"/>' +
    '<rect x="9.5" y="18" width="12.5" height="2" rx="1" fill="rgba(255,255,255,.13)"/>' +
    '<rect x="9.5" y="21" width="8" height="2" rx="1" fill="rgba(255,255,255,.1)"/>' +
    '<circle cx="16" cy="29" r="1.8" fill="#555"/>' +
    '</svg>';

  var TAB =
    '<svg width="164" height="112" viewBox="0 0 164 112" fill="none">' +
    '<ellipse cx="82" cy="108" rx="60" ry="4.5" fill="rgba(0,0,0,.22)"/>' +
    '<rect x="8" y="2" width="148" height="100" rx="9" fill="#252533"/>' +
    '<rect x="16" y="9" width="132" height="84" rx="4" fill="#0f0f1e"/>' +
    '<rect x="16" y="9" width="132" height="18" rx="4" fill="#E9403B"/>' +
    '<rect x="16" y="22" width="132" height="5" fill="#E9403B"/>' +
    '<text x="38" y="21" font-family="Arial" font-weight="bold" font-size="7.5" fill="#fff">PASS24.online</text>' +
    '<rect x="22" y="33" width="56" height="34" rx="4" fill="rgba(255,255,255,.07)"/>' +
    '<rect x="22" y="33" width="56" height="10" rx="4" fill="rgba(255,255,255,.1)"/>' +
    '<text x="26" y="41" font-family="Arial" font-size="5.5" fill="rgba(255,255,255,.5)">\u041f\u0440\u043e\u043f\u0443\u0441\u043a\u0430</text>' +
    '<rect x="26" y="46" width="18" height="16" rx="3" fill="#E9403B" opacity=".8"/>' +
    '<text x="28.5" y="57.5" font-family="Arial" font-size="8" fill="white" font-weight="bold">14</text>' +
    '<rect x="48" y="46" width="18" height="16" rx="3" fill="#00C2A0" opacity=".75"/>' +
    '<text x="50.5" y="57.5" font-family="Arial" font-size="8" fill="white" font-weight="bold">6</text>' +
    '<rect x="84" y="33" width="58" height="34" rx="4" fill="rgba(255,255,255,.07)"/>' +
    '<text x="88" y="41" font-family="Arial" font-size="5.5" fill="rgba(255,255,255,.5)">\u0410\u0432\u0442\u043e</text>' +
    '<rect x="87" y="47" width="50" height="4" rx="2" fill="rgba(255,255,255,.18)"/>' +
    '<rect x="22" y="72" width="120" height="7" rx="3" fill="rgba(255,255,255,.09)"/>' +
    '<text x="26" y="78" font-family="Arial" font-size="4.5" fill="rgba(255,255,255,.4)">\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f</text>' +
    '<circle cx="28" cy="83" r="3" fill="#00C2A0" opacity=".85"/>' +
    '<rect x="34" y="81.5" width="64" height="3" rx="1.5" fill="rgba(255,255,255,.18)"/>' +
    '<circle cx="82" cy="101" r="4" fill="#333" stroke="#444" stroke-width=".8"/>' +
    '<circle cx="82" cy="6" r="1.8" fill="#333"/>' +
    '</svg>';

  /* ── DOM ── */
  function el(tag, id, html) {
    var d = document.createElement(tag);
    if (id)   d.id = id;
    if (html) d.innerHTML = html;
    return d;
  }

  document.body.appendChild(el('div', '_p24btn', ICON));

  document.body.appendChild(el('div', '_p24tip',
    '<button id="_p24tip-x">&#10005;</button>' +
    '<span id="_p24l1">\uD83C\uDF81 \u041f\u043b\u0430\u043d\u0448\u0435\u0442 \u0432 \u043f\u043e\u0434\u0430\u0440\u043e\u043a</span>' +
    '<span id="_p24l2">\u23F3 \u0410\u043a\u0446\u0438\u044f \u0434\u043e \u043a\u043e\u043d\u0446\u0430 \u043c\u0430\u044f!</span>'
  ));

  document.body.appendChild(el('div', '_p24ov',
    '<div id="_p24modal">' +
      '<div id="_p24hd">' +
        '<button id="_p24x">&#10005;</button>' +
        '<div id="_p24logo">' +
          '<svg width="30" height="30" viewBox="0 0 30 30" fill="none">' +
            '<rect width="30" height="30" rx="7" fill="rgba(255,255,255,.2)"/>' +
            '<path d="M20 8a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="white"/>' +
            '<path d="M15 15l-7 7v2h2l1-1v-1h1v-1h1l2-2z" fill="white"/>' +
          '</svg>' +
          '<div id="_p24lt">PASS24<em>.online</em></div>' +
        '</div>' +
        '<div id="_p24tab">' + TAB + '</div>' +
        '<div id="_p24badge"><b>\uD83C\uDF81 \u041f\u043b\u0430\u043d\u0448\u0435\u0442 \u0432 \u043f\u043e\u0434\u0430\u0440\u043e\u043a!</b>\u041f\u0440\u0438 \u043e\u043f\u043b\u0430\u0442\u0435 \u0442\u0430\u0440\u0438\u0444\u0430 \u043d\u0430\u00A03\u00A0\u043c\u0435\u0441\u044f\u0446\u0430 \u0432\u00A0\u043c\u0430\u0435</div>' +
      '</div>' +
      '<div id="_p24body">' +
        '<p>\u041e\u0444\u043e\u0440\u043c\u0438\u0442\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 \u043d\u0430 \u0441\u0435\u0440\u0432\u0438\u0441 <strong>PASS24.online</strong> \u0432 \u043c\u0430\u0435 \u2014 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u043f\u043b\u0430\u043d\u0448\u0435\u0442 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043b\u0443\u0436\u0431\u044b \u043e\u0445\u0440\u0430\u043d\u044b \u0432 \u043f\u043e\u0434\u0430\u0440\u043e\u043a.</p>' +
        '<p id="_p24note">\u0421\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0430 \u0442\u0430\u0440\u0438\u0444 <a href="https://pass24online.ru/tarif" target="_blank" rel="noopener">\u00AB\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439\u00BB</a> \u0438 \u0432\u044b\u0448\u0435 \u043f\u0440\u0438 \u043e\u043f\u043b\u0430\u0442\u0435 3\u00A0\u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u043d\u0430 \u043e\u0434\u043d\u043e \u044e\u0440.\u00A0\u043b\u0438\u0446\u043e. \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u0432 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043e.</p>' +
        '<div id="_p24form"></div>' +
      '</div>' +
    '</div>'
  ));

  /* ── ЛОГИКА ── */
  var btn  = document.getElementById('_p24btn');
  var tip  = document.getElementById('_p24tip');
  var tipX = document.getElementById('_p24tip-x');
  var ov   = document.getElementById('_p24ov');
  var modX = document.getElementById('_p24x');

  var tipVisible = false;

  /* показываем тултип через 3 сек */
  setTimeout(function(){
    tip.classList.add('on');
    btn.classList.add('tip-open');
    tipVisible = true;
  }, 3000);
  setTimeout(function(){
    tip.classList.add('on2');
  }, 5500);

  function openModal(){
    ov.classList.add('on');
    document.body.style.overflow = 'hidden';
  }
  function closeModal(){
    ov.classList.remove('on');
    document.body.style.overflow = '';
  }

  /* клик на кнопку */
  btn.addEventListener('click', function(){
    if (tipVisible) {
      openModal();
    } else {
      /* разворачиваем тултип, кнопка возвращается */
      tip.classList.add('on', 'on2');
      btn.classList.remove('collapsed');
      btn.classList.add('tip-open');
      tipVisible = true;
    }
  });

  /* клик по тексту тултипа — модалка */
  tip.addEventListener('click', openModal);

  /* крестик тултипа — свернуть, иконка уходит в край */
  tipX.addEventListener('click', function(e){
    e.stopPropagation();
    tip.classList.remove('on', 'on2');
    btn.classList.remove('tip-open');
    btn.classList.add('collapsed');
    tipVisible = false;
  });

  /* крестик модалки */
  modX.addEventListener('click', function(e){ e.stopPropagation(); closeModal(); });
  ov.addEventListener('click', function(e){ if(e.target === ov) closeModal(); });
  document.addEventListener('keydown', function(e){ if(e.key === 'Escape') closeModal(); });

  /* загружаем форму Битрикс24 при первом открытии модалки */
  var formLoaded = false;
  function loadBitrixForm() {
    if (formLoaded) return;
    formLoaded = true;
    var c = document.getElementById('_p24form');
    var tag = document.createElement('script');
    tag.setAttribute('data-b24-form', 'inline/10/p65iwe');
    tag.setAttribute('data-skip-moving', 'true');
    c.appendChild(tag);
    var loader = document.createElement('script');
    loader.async = true;
    loader.src = 'https://cdn-ru.bitrix24.ru/b37140496/crm/form/loader_10.js?' + (Date.now()/180000|0);
    c.appendChild(loader);
  }

  /* capture-фаза: срабатывает до stopPropagation внутри тултипа */
  document.getElementById('_p24btn').addEventListener('click', function(){
    if (tipVisible) loadBitrixForm();
  }, true);
  tip.addEventListener('click', function(){ loadBitrixForm(); }, true);


})();