/*SLIDER TESTIMONIAL START*/

document.addEventListener("DOMContentLoaded", () => {
  document
    .querySelectorAll(".block-slider-testimonial-wrapper")
    .forEach((sliderEl) => {
      const scope = sliderEl.closest(".testimonial-slider-scope") || sliderEl;
      const nextBtn = scope.querySelector(".testimonial-next");
      const prevBtn = scope.querySelector(".testimonial-prev");

      new Swiper(sliderEl, {
        speed: 600,
        loop: false,
        watchOverflow: true,

        navigation:
          nextBtn && prevBtn ? { nextEl: nextBtn, prevEl: prevBtn } : undefined,

        breakpoints: {
          0: { slidesPerView: 1.1, spaceBetween: 12 },
          768: { slidesPerView: 1.8, spaceBetween: 24 },
          992: { slidesPerView: "auto", spaceBetween: 24 },
        },
      });
    });
});

/*SLIDER TESTIMONIAL END*/


document.addEventListener("DOMContentLoaded", () => {
  const nav = document.querySelector('.navbar_component.w-nav[data-wf--navbar--variant="base"]');
  const pageWrap = document.querySelector(".main-wrapper");
  const heroWrap = document.querySelector(".hero-home-wrapper");
  const closeBtns = document.querySelectorAll(".close-box");
  if (nav && pageWrap) {
    pageWrap.classList.add("is-bar-padding");
  }
 
  if (closeBtns.length) {
    closeBtns.forEach((btn) => {
      btn.addEventListener("click", () => {
        if (pageWrap) {
          pageWrap.classList.remove("is-bar-padding");
        }
        if (heroWrap) {
          heroWrap.classList.add("is-close-top-bar");
        }
      });
    });
  }
});

/*Block page scroll if Navbar open START*/
const menuButton = document.querySelector('.navbar_menu-button');
const navbarComponent = document.querySelector('.navbar_component');
const body = document.body;

if (menuButton && navbarComponent) {
  const observer = new MutationObserver((mutationsList) => {
    for (let mutation of mutationsList) {
      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
        const isOpen = menuButton.classList.contains('w--open');

        // Add/remove is-on
        if (isOpen) {
          navbarComponent.classList.add('is-on');
          // block scroll
          body.style.overflow = 'hidden';
        } else {
          navbarComponent.classList.remove('is-on');
          // allow scroll
          body.style.overflow = '';
        }
      }
    }
  });

  observer.observe(menuButton, { attributes: true });
}
/*Block page scroll if Navbar open START*/

document.addEventListener("DOMContentLoaded", () => {
  const closeBtn = document.querySelector(".close-box");
  const announcementBar = document.querySelector(".announcement-bar");

  if (closeBtn && announcementBar) {
    closeBtn.addEventListener("click", () => {
      announcementBar.classList.add("is-closed");
    });
  }
});

document.addEventListener("DOMContentLoaded", () => {
  const items = document.querySelectorAll(".item-migration-process");

  // Exit if no items found
  if (!items.length) return;

  // Validate required structure inside each item
  const isValidStructure = [...items].every((item) => {
    return (
      item.querySelector(".question-migration-process") &&
      item.querySelector(".answer-migration-process") &&
      item.querySelector(".title-question-migration")
    );
  });

  // Exit if structure is broken
  if (!isValidStructure) return;

  // =========================
  // INIT FIRST OPEN
  // =========================
  openItem(items[0]);

  // =========================
  // CLICK HANDLER
  // =========================
  items.forEach((item) => {
    const trigger = item.querySelector(".question-migration-process");

    trigger.addEventListener("click", () => {
      // Prevent closing active item
      if (item.classList.contains("is-open")) return;

      // Close all items
      items.forEach((el) => closeItem(el));

      // Open clicked item
      openItem(item);
    });
  });

  // =========================
  // FUNCTIONS
  // =========================

  function openItem(item) {
    const answer = item.querySelector(".answer-migration-process");
    const title = item.querySelector(".title-question-migration");

    if (!answer) return;

    item.classList.add("is-open");
    title?.classList.add("is-on");

    // Animate height from 0 to scrollHeight
    answer.style.height = answer.scrollHeight + "px";
  }

  function closeItem(item) {
    const answer = item.querySelector(".answer-migration-process");
    const title = item.querySelector(".title-question-migration");

    if (!answer) return;

    item.classList.remove("is-open");
    title?.classList.remove("is-on");

    // Collapse height to 0
    answer.style.height = "0px";
  }
});

document.addEventListener("DOMContentLoaded", () => {
  const popup = document.querySelector(".popup-wrapper");
  const openBtns = document.querySelectorAll('[href="#popup-open"]');
  const closeBtns = document.querySelectorAll(".close-popup");

  if (!popup) return;

  // =========================
  // OPEN POPUP
  // =========================
  function openPopup() {
    popup.classList.add("is-on");
    document.body.classList.add("no-scroll"); // lock scroll
  }

  // =========================
  // CLOSE POPUP
  // =========================
  function closePopup() {
    popup.classList.remove("is-on");
    document.body.classList.remove("no-scroll"); // unlock scroll
  }

  // =========================
  // CLICK OPEN
  // =========================
  openBtns.forEach((btn) => {
    btn.addEventListener("click", (e) => {
      e.preventDefault();
      openPopup();
    });
  });

  // =========================
  // CLICK CLOSE
  // =========================
  closeBtns.forEach((btn) => {
    btn.addEventListener("click", (e) => {
      e.preventDefault();
      closePopup();
    });
  });

  // =========================
  // CLOSE ON ESC
  // =========================
  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape" && popup.classList.contains("is-on")) {
      closePopup();
    }
  });
});

/* =============================================================================
   Marquee Mobile/Tablet Only (<= 991px) — adapted to your structure
   Structure:
   .marquee-mob
     .marquee_track-mob
       .marquee_item-mob ...
============================================================================= */
(() => {
  const MQ = window.matchMedia("(max-width: 991px)");

  function initMarquees(selector, defaultSpeed) {
    const marquees = document.querySelectorAll(selector);
    if (!marquees.length) return;

    marquees.forEach((parent) => {
      // Prevent double init
      if (parent.dataset.marqueeInit === "true") return;

      const track = parent.querySelector(".marquee_track-mob") || parent;
      if (!track) return;

      // Mark init early to avoid re-entrance
      parent.dataset.marqueeInit = "true";

      const original = track.innerHTML;

      // Duplicate content 2x (total 3 copies)
      track.insertAdjacentHTML("beforeend", original);
      track.insertAdjacentHTML("beforeend", original);

      // Optional controls via attributes:
      // data-speed="0.6" data-direction="right|left"
      const speedAttr = parseFloat(parent.getAttribute("data-speed"));
      const speed = !isNaN(speedAttr) ? speedAttr : defaultSpeed;
      const direction = parent.dataset.direction === "right" ? 1 : -1;

      let offset = 0;
      let paused = false;
      let rafId = null;

      // Calculate width of one cycle (first third of children)
      function getCycleWidth() {
        const kids = Array.from(track.children);
        const oneSetCount = Math.floor(kids.length / 3);
        return kids
          .slice(0, oneSetCount)
          .reduce((sum, el) => sum + el.clientWidth, 0);
      }

      let cycleWidth = 0;

      // Recalc after images load / on resize to avoid wrong widths
      function recalc() {
        cycleWidth = getCycleWidth();
      }

      const imgs = track.querySelectorAll("img");
      let pending = 0;

      imgs.forEach((img) => {
        if (!img.complete) {
          pending++;
          img.addEventListener(
            "load",
            () => {
              pending = Math.max(0, pending - 1);
              if (pending === 0) recalc();
            },
            { once: true }
          );
        }
      });

      // Initial calc (may be updated after images load)
      recalc();

      const animate = () => {
        if (!paused) {
          offset += speed * direction;
          track.style.transform = `translateX(${offset}px)`;

          if (cycleWidth > 0) {
            if (direction === -1 && Math.abs(offset) > cycleWidth) {
              offset += cycleWidth;
            }
            if (direction === 1 && offset > 0) {
              offset -= cycleWidth;
            }
          }
        }
        rafId = requestAnimationFrame(animate);
      };

      // Store cleanup on element for responsive teardown
      parent._marqueeCleanup = () => {
        if (rafId) cancelAnimationFrame(rafId);
        rafId = null;

        // Restore original content and reset transform
        track.style.transform = "";
        track.innerHTML = original;

        delete parent._marqueeCleanup;
        delete parent.dataset.marqueeInit;
      };

      // Optional pause on hover (works mostly on non-touch)
      parent.addEventListener("mouseenter", () => (paused = true));
      parent.addEventListener("mouseleave", () => (paused = false));

      window.addEventListener("resize", recalc);

      animate();
    });
  }

  function enableOrDisable() {
    if (MQ.matches) {
      initMarquees(".marquee-mob", 0.6);
    } else {
      // On desktop: teardown if previously initialized
      document.querySelectorAll(".marquee-mob").forEach((el) => {
        if (typeof el._marqueeCleanup === "function") el._marqueeCleanup();
      });
    }
  }

  document.addEventListener("DOMContentLoaded", enableOrDisable);
  MQ.addEventListener("change", enableOrDisable);
})();

document.addEventListener("DOMContentLoaded", () => {

  // =========================
  // ONLY DESKTOP
  // =========================
  if (window.innerWidth < 992) return;

  const wrappers = document.querySelectorAll("[data-cursor-trigger]");
  if (!wrappers.length) return;

  wrappers.forEach(wrapper => {
    const cursor = wrapper.querySelector(".cursor-wrapper");
    if (!cursor) return;

    function move(e) {
      const rect = wrapper.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      cursor.style.left = `${x}px`;
      cursor.style.top = `${y}px`;
    }

    wrapper.addEventListener("mouseenter", (e) => {
      move(e);
      cursor.classList.add("is-visible");
    });

    wrapper.addEventListener("mousemove", move);

    wrapper.addEventListener("mouseleave", () => {
      cursor.classList.remove("is-visible");
    });
  });
});
/****************************************
 * Lightbox video START
 ***************************************/
document.addEventListener("DOMContentLoaded", function () {
  const lightboxes = document.querySelectorAll("[class*='lightbox-video']");

  lightboxes.forEach((lb) => {
    const jsonScript = lb.querySelector(".w-json");
    const videoEl = lb.querySelector(".video-data-url");
    if (!jsonScript || !videoEl) return;

    const raw = videoEl.textContent || "";
    const videoUrl = raw
      .replace(/&amp;/g, "&")
      .replace(/\s+/g, "")
      .replace(/\.+$/, "")
      .trim();

    if (!videoUrl) return;

    // ------------------------------------
    // YouTube ID
    // ------------------------------------
    function getYouTubeId(url) {
      try {
        const parsed = new URL(url);

        if (parsed.searchParams.get("v")) {
          return parsed.searchParams.get("v");
        }

        const parts = parsed.pathname.split("/");
        const embedIndex = parts.indexOf("embed");
        if (embedIndex !== -1 && parts[embedIndex + 1]) {
          return parts[embedIndex + 1].split("?")[0];
        }
      } catch {}

      const match = url.match(/youtu\.be\/([^?]+)/);
      return match?.[1] || null;
    }

    let embedUrl = "";
    let htmlCode = "";

    const youtubeId = getYouTubeId(videoUrl);

    // ------------------------------------
    // YouTube EMBED (ONLY)
    // ------------------------------------
    if (youtubeId) {
      embedUrl = `https://www.youtube.com/embed/${youtubeId}?autoplay=1&mute=1&loop=1&playlist=${youtubeId}&playsinline=1&controls=1`;
      htmlCode = `<iframe src="${embedUrl}" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>`;
    } else {
      return;
    }

    const jsonData = {
      items: [
        {
          type: "video",
          url: embedUrl,
          html: htmlCode,
          thumbnailUrl: "",
          width: 940,
          height: 528,
        },
      ],
      group: "",
    };

    jsonScript.textContent = JSON.stringify(jsonData);
  });
});

/****************************************
 * Lightbox video END
 ***************************************/


gsap.registerPlugin(ScrollTrigger);

window.Webflow ||= [];
window.Webflow.push(() => {
  const BREAKPOINT = 991;
  const isMobile = window.innerWidth <= BREAKPOINT;

  const wrapper = document.querySelector(".block-component-sticky-wrapper");
  const line = document.querySelector(".line-sticky-block .active-white-line");
  const badges = gsap.utils.toArray(".badge-item-sticky");
  const anchorBlocks = gsap.utils.toArray("[anchor-link]");

  let isTabInteraction = false;
  let lastActiveYear = null;

  /* ============================
     HELPERS
     ============================ */

  function parseAnchor(anchor) {
    if (!anchor) return { year: null, type: null };
    const match = anchor.match(/^(\d{4})-([a-z])/);
    if (!match) return { year: null, type: null };

    return {
      year: match[1],
      type: match[2],
    };
  }

  function getAnchorFromBlock(block) {
    return block?.getAttribute("anchor-link") || null;
  }

  function setActiveBadgeByYear(year) {
    if (!year) return;

    badges.forEach((b) => b.classList.remove("is-active"));

    badges.forEach((badge) => {
      if (badge.id.startsWith(`${year}-`)) {
        badge.classList.add("is-active");
      }
    });

    lastActiveYear = year;
  }

  function scrollBlockToCenter(block) {
    if (!block) return;

    const rect = block.getBoundingClientRect();
    const y =
      window.pageYOffset + rect.top + rect.height / 2 - window.innerHeight / 2;

    window.scrollTo({
      top: y,
      behavior: "smooth",
    });
  }

  function findClosestLowerYearBlock(column, year, targetType) {
    if (!column || !year) return null;

    const blocks = Array.from(column.querySelectorAll("[anchor-link]"))
      .map((block) => {
        const { year: y, type } = parseAnchor(getAnchorFromBlock(block));
        return {
          block,
          year: parseInt(y, 10),
          type,
        };
      })
      .filter(
        (b) =>
          b.type === targetType &&
          Number.isFinite(b.year) &&
          b.year <= parseInt(year, 10)
      )
      .sort((a, b) => b.year - a.year);

    return blocks.length ? blocks[0].block : null;
  }

  /* ============================
     ACTIVE LINE
     ============================ */

  if (wrapper && line) {
    ScrollTrigger.create({
      trigger: wrapper,
      start: "top center",
      end: "bottom center",
      scrub: true,
      onUpdate: (self) => {
        gsap.set(line, { height: `${self.progress * 100}%` });
      },
    });
  }

  /* ============================
     ACTIVE YEAR TRACKING (SCROLL ONLY)
     ============================ */

  anchorBlocks.forEach((block) => {
    ScrollTrigger.create({
      trigger: block,
      start: "top center",
      end: "bottom center",
      onEnter: () => {
        if (isTabInteraction) return;

        const { year } = parseAnchor(getAnchorFromBlock(block));
        if (year) setActiveBadgeByYear(year);
      },
      onEnterBack: () => {
        if (isTabInteraction) return;

        const { year } = parseAnchor(getAnchorFromBlock(block));
        if (year) setActiveBadgeByYear(year);
      },
    });
  });

  /* ============================
     TABS (TABLET & DOWN)
     ============================ */

  if (!isMobile) return;

  const switches = Array.from(document.querySelectorAll(".switch-sticky"));
  const columns = Array.from(
    document.querySelectorAll(".block-colum-item-sticky")
  );

  if (!switches.length || !columns.length) return;

  switches.forEach((sw, index) => {
    sw.addEventListener("click", () => {
      isTabInteraction = true;
      setActiveTab(index);
    });
  });

  function setActiveTab(activeIndex) {
    switches.forEach((sw, i) =>
      sw.classList.toggle("is-active", i === activeIndex)
    );

    // 0 в†’ w, 1 в†’ s
    const targetType = activeIndex === 1 ? "s" : "w";

    columns.forEach((col, i) => {
      col.classList.remove("is-visible", "is-on");

      if (i === activeIndex) {
        col.classList.add("is-visible");

        requestAnimationFrame(() => {
          col.classList.add("is-on");

          requestAnimationFrame(() => {
            ScrollTrigger.refresh(true);

            /* ============================
               рџљ« NO AUTO-SCROLL BEFORE USER SCROLL
               ============================ */

            if (!lastActiveYear) {
              setTimeout(() => {
                isTabInteraction = false;
              }, 150);
              return;
            }

            const targetBlock = findClosestLowerYearBlock(
              col,
              lastActiveYear,
              targetType
            );

            if (targetBlock) {
              scrollBlockToCenter(targetBlock);

              const { year } = parseAnchor(getAnchorFromBlock(targetBlock));
              if (year) setActiveBadgeByYear(year);
            }

            setTimeout(() => {
              isTabInteraction = false;
            }, 250);
          });
        });
      }
    });
  }
});
/* animation gsap line */

gsap.registerPlugin(ScrollTrigger);

window.Webflow ||= [];
window.Webflow.push(() => {
  const firstTrigger = document.querySelector(
    ".block-hero-content-cmpt-sticky"
  );
  const secondTrigger = document.querySelector("[wrapper-two-triger]");
  const line = document.querySelector(".active-line-white");

  if (!firstTrigger || !secondTrigger || !line) return;

  /* ============================
     INITIAL STATE
     ============================ */
  gsap.set(line, {
    height: "0%",
    marginTop: 0,
  });

  /* ============================
     HEIGHT ANIMATION: 0% в†’ 100%
     ============================ */
  gsap.to(line, {
    height: "100%",
    duration: 1.6,
    ease: "power2.out",
    scrollTrigger: {
      trigger: firstTrigger,
      start: "top 50%",
      toggleActions: "play none none none",
      once: true,
      // markers: true
    },
  });

  /* ============================
     TOGGLE MARGIN-TOP ON SCROLL
     ============================ */
  ScrollTrigger.create({
    trigger: secondTrigger,
    start: "top 80%",
    onEnter: () => {
      gsap.to(line, {
        marginTop: 20,
        duration: 0.4,
        ease: "power2.out",
      });
    },
    onLeaveBack: () => {
      gsap.to(line, {
        marginTop: 0,
        duration: 0.4,
        ease: "power2.out",
      });
    },
    // markers: true
  });
});

/* animation gsap line */