/* ============================================================
   segment.js — H5 «Модульний лендинг під сегмент»
   1) Зчитує ?segment= → виставляє KZ.config.audienceSegment
      (ДО tracking.js, тому defer-порядок: segment → tracking).
   2) Рендерить динамічний офер під сегмент (hero pain + чіп +
      акцент + релевантна цифра + модульний value-list).
   3) Кінетик-hero: translateX-пан по 7 фігурах стрічки.
      Дефолт — автоцикл усіх 7; під сегмент — залип на потрібній.
   ============================================================ */
(function () {
  "use strict";
  var KZ = window.KZ || (window.KZ = {});
  var cfg = KZ.config || (KZ.config = {});
  var segs = KZ.segments || {};

  /* ---------- 1. визначити сегмент із URL ---------- */
  var key = null;
  try {
    var p = new URLSearchParams(location.search).get("segment");
    if (p && Object.prototype.hasOwnProperty.call(segs, p)) key = p;
  } catch (e) { /* noop */ }

  var seg = key ? segs[key] : null;
  cfg.audienceSegment = key || "default";   // ← tracking.js підхопить це у base

  /* ---------- 2. рендер динамічного оферу ---------- */
  function setText(id, txt) { var el = document.getElementById(id); if (el) el.textContent = txt; }

  if (seg) {
    document.documentElement.style.setProperty("--seg", seg.accent);

    var chip = document.getElementById("segChip");
    if (chip) { chip.textContent = "Для тебе: " + seg.label; chip.setAttribute("data-on", ""); }

    var pain = document.getElementById("segPain");
    if (pain) { pain.textContent = seg.pain; pain.setAttribute("data-on", ""); }

    var match = document.getElementById("proofMatch");
    if (match) {
      setText("proofMatchNum", seg.caseNum);
      setText("proofMatchLabel", seg.caseLabel);
      match.setAttribute("data-on", "");
    }

    /* модульний value-list (learn | after) */
    var v = (KZ.value || {})[seg.valueList];
    var heading = document.getElementById("valueHeading");
    var list = document.getElementById("valueList");
    if (v && heading && list) {
      heading.textContent = v.heading;
      list.innerHTML = "";
      v.items.forEach(function (it) {
        var li = document.createElement("li");
        li.textContent = it;
        list.appendChild(li);
      });
    }
  }

  /* ---------- 3. кінетик-hero (background-position пан, БЕЗШОВНО) ----------
     Стрічка = фон із repeat-x → тайлиться нескінченно: ліворуч від 1-ї фігури
     стоїть остання, праворуч від останньої — перша. Пан просто зсуває
     background-position-x і їде далі — кінець перетікає в початок без стрибка/
     темних країв. pos монотонно росте; модуль робить саме тайлення браузера. */
  var stage = document.querySelector(".hero5__stage");
  var strip = document.getElementById("heroStrip");
  var dotsWrap = document.getElementById("heroDots");
  var PANELS = 7;
  if (!stage || !strip) return;

  var reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var pos = seg ? Math.max(0, Math.min(PANELS - 1, seg.panel | 0)) : 0;
  var panelW = 0, stageW = 0, timer = null;
  var nat = { w: 2000, h: 381 };   // дефолт; уточнюється з реального файлу

  /* крапки-індикатори */
  var dots = [];
  if (dotsWrap) {
    for (var i = 0; i < PANELS; i++) {
      var li = document.createElement("li");
      dotsWrap.appendChild(li);
      dots.push(li);
    }
  }
  function paintDots() {
    var act = ((pos % PANELS) + PANELS) % PANELS;
    for (var d = 0; d < dots.length; d++) {
      if (d === act) dots[d].setAttribute("data-active", "");
      else dots[d].removeAttribute("data-active");
    }
  }

  function goTo(p, animate) {
    pos = p;
    var x = (stageW / 2) - (pos + 0.5) * panelW;   // центр панелі pos у viewport
    if (!animate) strip.style.transition = "none";
    strip.style.backgroundPosition = x + "px center";
    if (!animate) { void strip.offsetWidth; strip.style.transition = ""; }
    paintDots();
  }

  function measure() {
    // background-size: auto 100% → висота фону = висота сцени; ширина пропорційна
    var renderedW = stage.offsetHeight * (nat.w / nat.h);
    panelW = renderedW / PANELS;
    stageW = stage.offsetWidth;
    goTo(pos, false);
  }

  function play() {
    if (timer || reduce || seg) return;    // під сегмент — без автоциклу
    timer = setInterval(function () { goTo(pos + 1, true); }, 2800);  // pos росте; repeat-x загортає
  }
  function pause() { if (timer) { clearInterval(timer); timer = null; } }

  /* дізнатися реальні розміри фото (з CSS background-image), тоді стартувати */
  function start() { measure(); play(); }
  var bg = getComputedStyle(strip).backgroundImage || "";
  var mm = bg.match(/url\(["']?(.*?)["']?\)/);
  if (mm && mm[1]) {
    var pre = new Image();
    pre.onload = function () {
      if (pre.naturalWidth) { nat.w = pre.naturalWidth; nat.h = pre.naturalHeight; }
      start();
    };
    pre.onerror = start;
    pre.src = mm[1];
    if (pre.complete && pre.naturalWidth) { nat.w = pre.naturalWidth; nat.h = pre.naturalHeight; start(); }
  } else {
    start();
  }

  /* пауза, коли hero поза екраном / вкладка у фоні */
  if ("IntersectionObserver" in window) {
    new IntersectionObserver(function (es) {
      es.forEach(function (e) { if (e.isIntersecting) play(); else pause(); });
    }, { threshold: 0.2 }).observe(stage);
  }
  document.addEventListener("visibilitychange", function () {
    if (document.hidden) pause(); else play();
  });

  /* релейаут на ресайз/орієнтацію */
  var rt = null;
  window.addEventListener("resize", function () {
    clearTimeout(rt);
    rt = setTimeout(measure, 150);
  }, { passive: true });
})();
