/*Disable all dev mods for complex components if the user forgot to disable them in the admin area*/
document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".dev-edite-mode").forEach((el) => {
    if (el.classList.contains("is-on")) {
      el.classList.remove("is-on");
    }
  });
});
/*ADD IS OFF STATE  START */
document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".lottie-heromain-box").forEach((box) => {
    box.classList.add("is-off");
  });
});

/*ADD IS OFF STATE  END */

/*FAQ  START */

document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".faq_accordion-second").forEach((accordion) => {
    const question = accordion.querySelector(".faq_question-second");
    const title = accordion.querySelector(".faq-title"); // or .heading-style-h6

    if (!question || !title) return;

    question.addEventListener("click", () => {
      // Toggle accordion open state
      accordion.classList.toggle("is-open");

      // Toggle title active state
      title.classList.toggle("is-on", accordion.classList.contains("is-open"));
    });
  });
});

document.addEventListener("click", function (event) {
  const element = event.target.closest('[js-faq-collapse="true"]');
  if (element) {
    if (!element.classList.contains("open")) {
      document
        .querySelectorAll('[js-faq-collapse="true"].open')
        .forEach(function (item) {
          if (item !== element) {
            item.click();
          }
        });

      element.classList.add("open");
    } else {
      element.classList.remove("open");
    }
  }
});

document.addEventListener("DOMContentLoaded", () => {
  const firstAccordion = document.querySelector(".faq_accordion-second");
  if (!firstAccordion) return;

  const firstQuestion = firstAccordion.querySelector(
    '[js-faq-collapse="true"]'
  );
  const firstTitle = firstAccordion.querySelector(".faq-title");

  if (!firstQuestion || !firstTitle) return;

  // If first FAQ is not open, open it via Webflow interaction
  if (!firstQuestion.classList.contains("open")) {
    firstQuestion.click();
  }

  // Sync combo classes
  firstAccordion.classList.add("is-open");
  firstTitle.classList.add("is-on");
});

/*FAQ  END */

/*Start marquee code */
function initMarquees(selector, speed, copies = 8) {
  const marquees = document.querySelectorAll(selector);
  if (!marquees.length) return;

  marquees.forEach((parent) => {
    const original = parent.innerHTML;

    // clear and rebuild
    parent.innerHTML = "";

    // create 6 total copies
    for (let i = 0; i < copies; i++) {
      parent.insertAdjacentHTML("beforeend", original);
    }

    let offset = 0;

    setInterval(() => {
      const first = parent.firstElementChild;
      if (!first) return;

      first.style.marginLeft = `-${offset}px`;

      if (offset >= first.clientWidth) {
        offset = 0;
      } else {
        offset += speed;
      }
    }, 16);
  });
}

document.addEventListener("DOMContentLoaded", () => {
  initMarquees(".marquee", 0.9, 8);
});

/*End marquee code */

/*SLIDER TESTIMONIAL START*/

document.addEventListener("DOMContentLoaded", () => {
  const USE_FADE = false;

  document.querySelectorAll(".block-carousel-testimonials").forEach((block) => {
    const swiperEl = block.querySelector(".slider-testimonial-wrapper");
    const prevBtn = block.querySelector("#test-arrow-slider-prev");
    const nextBtn = block.querySelector("#test-arrow-slider-next");
    const arrowWrapper = block.querySelector(".block-arrow-slider-wrapper");

    if (!swiperEl) return;

    const slides = swiperEl.querySelectorAll(".swiper-slide.is-testimonial");

    // ✅ ONE SLIDE LOGIC
    if (slides.length <= 1) {
      slides.forEach((slide) => {
        slide.style.opacity = "1";
      });

      if (prevBtn) prevBtn.style.display = "none";
      if (nextBtn) nextBtn.style.display = "none";

      // 🔥 ADD COMBO CLASS
      if (arrowWrapper) {
        arrowWrapper.classList.add("is-one-slide");
      }

      return;
    }

    // ✅ NORMAL SWIPER INIT
    new Swiper(swiperEl, {
      slidesPerView: 1,
      loop: true,
      speed: 800,

      autoplay: {
        delay: 10000,
        disableOnInteraction: false,
      },

      effect: USE_FADE ? "fade" : "slide",
      fadeEffect: USE_FADE ? { crossFade: true } : undefined,

      navigation: {
        prevEl: prevBtn,
        nextEl: nextBtn,
      },

      watchSlidesProgress: true,
    });
  });
});

/*SLIDER TESTIMONIAL END*/

/* ==========================
       Tabs logic (base) 
       ========================== */

document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".flex-tab-wrapper").forEach((wrapper) => {
    const tabs = Array.from(wrapper.querySelectorAll(".menu_tab"));
    const panels = Array.from(wrapper.querySelectorAll(".content_tab"));

    if (!tabs.length || !panels.length) return;

    function activateTab(index) {
      const tab = tabs[index];
      const panel = panels[index];
      if (!tab || !panel) return;

      // reset tabs
      tabs.forEach((t) => t.classList.remove("is-active"));

      // reset panels
      panels.forEach((p) => p.classList.remove("is-active", "is-visible"));

      // activate tab
      tab.classList.add("is-active");

      // activate panel (layout)
      panel.classList.add("is-active");

      // activate panel (animation)
      requestAnimationFrame(() => {
        panel.classList.add("is-visible");
      });
    }

    // bindings
    tabs.forEach((tab, i) =>
      tab.addEventListener("click", () => activateTab(i))
    );

    // init (respect existing active)
    const found = tabs.findIndex((t) => t.classList.contains("is-active"));
    activateTab(found >= 0 ? found : 0);
  });
});

document.addEventListener("DOMContentLoaded", () => {
  const BREAKPOINT = 992;

  document.querySelectorAll(".flex-tab-wrapper").forEach((wrapper) => {
    const slider = wrapper.querySelector(".menu-tabs-slider");
    const listWrap = wrapper.querySelector(".menu_tabs_wrap");
    const arrow = wrapper.querySelector(".box-arrow-dd");
    const mirror = wrapper.querySelector(".block-item-mob-tab");
    const listTabs = wrapper.querySelectorAll(".menu_tabs_wrap .menu_tab");

    if (!slider || !listWrap || !listTabs.length || !mirror) return;

    const isMobile = () => window.innerWidth < BREAKPOINT;

    function openAccordion() {
      listWrap.classList.add("is-open");
      arrow?.classList.add("is-rotated");
    }

    function closeAccordion() {
      listWrap.classList.remove("is-open");
      arrow?.classList.remove("is-rotated");
    }

    function toggleAccordion() {
      listWrap.classList.contains("is-open")
        ? closeAccordion()
        : openAccordion();
    }

    /* HEADER CLICK */
    slider.addEventListener("click", (e) => {
      if (!isMobile()) return;

      // 🔥 allow toggle ONLY if click is NOT on list tab
      if (e.target.closest(".menu_tabs_wrap .menu_tab")) return;

      toggleAccordion();
    });

    /* TAB CLICK */
    listTabs.forEach((tab) => {
      tab.addEventListener("click", (e) => {
        if (!isMobile()) return;

        e.stopPropagation(); // 🔑

        mirror.innerHTML = tab.outerHTML;
        closeAccordion();
      });
    });

    /* INIT */
    const activeTab = wrapper.querySelector(
      ".menu_tabs_wrap .menu_tab.is-active"
    );
    if (activeTab && isMobile()) {
      mirror.innerHTML = activeTab.outerHTML;
      closeAccordion();
    }

    /* CLEANUP */
    window.addEventListener("resize", () => {
      if (!isMobile()) {
        closeAccordion();
        mirror.innerHTML = "";
      }
    });
  });
});

/* ==========================
   Image Accordion (FAQ-like logic)
   ========================== */

document.addEventListener("DOMContentLoaded", () => {
  document
    .querySelectorAll(".item-image-accordion-wrapper")
    .forEach((wrapper) => {
      const question = wrapper.querySelector(".question-accordion");
      const item = wrapper.querySelector(".item-image-accordion");
      const media = wrapper.querySelector(".media-image-accordion");

      if (!question || !item || !media) return;

      question.addEventListener("click", () => {
        // Toggle visual state
        item.classList.toggle("is-on");
        media.classList.toggle("is-active");
      });
    });
});

/* 🔥 MAIN LOGIC — exact same as FAQ, but SCOPED */
document.addEventListener("click", function (event) {
  const element = event.target.closest(".question-accordion");
  if (!element) return;

  const root = element.closest(".image-accordion-wrapper");
  if (!root) return;

  if (!element.classList.contains("open")) {
    root.querySelectorAll(".question-accordion.open").forEach(function (item) {
      if (item !== element) {
        item.click();
      }
    });

    element.classList.add("open");
  } else {
    element.classList.remove("open");
  }
});

/* ==========================
     Image Accordion INIT
     ========================== */

document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".image-accordion-wrapper").forEach((root) => {
    const firstWrapper = root.querySelector(".item-image-accordion-wrapper");
    if (!firstWrapper) return;

    const firstQuestion = firstWrapper.querySelector(".question-accordion");
    const firstItem = firstWrapper.querySelector(".item-image-accordion");
    const firstMedia = firstWrapper.querySelector(".media-image-accordion");

    if (!firstQuestion || !firstItem || !firstMedia) return;

    if (!firstQuestion.classList.contains("open")) {
      firstQuestion.click();
    }

    firstItem.classList.add("is-on");
    firstMedia.classList.add("is-active");
  });
});

/* ==========================
   DD CODE NAV START
   ========================== */
/*
document.addEventListener("DOMContentLoaded", () => {
  const wrapper = document.querySelector(".block-solution-wrapper");
  if (!wrapper) return;

  const buttons = Array.from(wrapper.querySelectorAll(".button-solution"));

  const groups = Array.from(
    wrapper.querySelectorAll(".group-list-link-solution")
  );

  const ACTIVE_DELAY = 80;

  function resetState() {
    buttons.forEach((btn) => btn.classList.remove("is-on"));
    groups.forEach((group) => {
      group.classList.remove("is-visible");
      group.classList.remove("is-active");
    });
  }

  function activateByIndex(index) {
    const button = buttons[index];
    const group = groups[index];
    if (!button || !group) return;

    resetState();

    button.classList.add("is-on");
    group.classList.add("is-visible");

    setTimeout(() => {
      group.classList.add("is-active");
    }, ACTIVE_DELAY);
  }

  // ✅ Activate first item by default
  activateByIndex(0);

  // Hover logic
  buttons.forEach((button, index) => {
    button.addEventListener("mouseenter", () => {
      activateByIndex(index);
    });
  });
});
*/
/* ==========================
   Cards - Vertical Swipe START
   ========================== */
document.addEventListener("DOMContentLoaded", () => {
  const BREAKPOINT = 768;
  const SMOOTHING = 0.11;

  function clamp(v, min, max) {
    return Math.min(Math.max(v, min), max);
  }

  function lerp(a, b, t) {
    return a + (b - a) * t;
  }

  const states = [];
  let rafId = null;

  function update() {
    if (window.innerWidth < BREAKPOINT) return;

    const lists = document.querySelectorAll(
      ".cards-vertical-swipe-list.is-sticky"
    );
    if (!lists.length) return;

    const FADE_START = 0;
    const FADE_END = 1;
    const MIN_SCALE = 0.7;
    const MIN_OPACITY = 0;

    lists.forEach((list, index) => {
      const card = list.querySelector(".cards-vertical-swipe");
      if (!card) return;

      if (!states[index]) {
        states[index] = {
          scale: 1,
          opacity: 1,
          targetScale: 1,
          targetOpacity: 1,
        };
      }

      // Last card — static
      if (index === lists.length - 1) {
        states[index].targetScale = 1;
        states[index].targetOpacity = 1;
      } else {
        const nextList = lists[index + 1];
        const nextRect = nextList.getBoundingClientRect();
        const currentRect = list.getBoundingClientRect();

        const overlap =
          (currentRect.bottom - nextRect.top) / currentRect.height;

        const progress = clamp(
          (overlap - FADE_START) / (FADE_END - FADE_START),
          0,
          1
        );

        if (overlap < FADE_START) {
          states[index].targetScale = 1;
          states[index].targetOpacity = 1;
        } else {
          states[index].targetScale = 1 - (1 - MIN_SCALE) * progress;

          states[index].targetOpacity =
            MIN_OPACITY + (1 - MIN_OPACITY) * Math.pow(1 - progress, 3);
        }
      }

      states[index].scale = lerp(
        states[index].scale,
        states[index].targetScale,
        SMOOTHING
      );

      states[index].opacity = lerp(
        states[index].opacity,
        states[index].targetOpacity,
        SMOOTHING
      );

      card.style.transform = `scale(${states[index].scale})`;
      card.style.opacity = states[index].opacity.toFixed(3);
      card.style.transformOrigin = "center top";
      card.style.willChange = "transform, opacity";
    });

    rafId = requestAnimationFrame(update);
  }

  function onScroll() {
    if (!rafId) {
      rafId = requestAnimationFrame(update);
    }
  }

  window.addEventListener("scroll", onScroll, { passive: true });
  window.addEventListener("resize", update);
  update();
});
/* ==========================
   Cards - Vertical Swipe END
   ========================== */

/* ==========================
   SLIDER  Carousel - Vertical START
   ========================== */
document.addEventListener("DOMContentLoaded", () => {
  const DESKTOP_BREAKPOINT = 992;
  const DUPLICATION_TIMES = 5;

  /* --------------------------------
       REQUIRED ELEMENTS CHECK
    -------------------------------- */

  const sliderEl = document.querySelector(".vertical-slider-carousel");
  if (!sliderEl) return;

  const wrapper = sliderEl.querySelector(".swiper-wrapper");
  if (!wrapper) return;

  const initialSlides = Array.from(wrapper.children).filter((el) =>
    el.classList.contains("swiper-slide")
  );
  if (!initialSlides.length) return;

  /* --------------------------------
       STATE
    -------------------------------- */

  let swiperInstance = null;
  let isDesktop = null;

  // Store original slides safely
  const originalSlides = initialSlides.map((slide) => slide.cloneNode(true));

  /* --------------------------------
       DOM HELPERS
    -------------------------------- */

  function prepareDesktopSlides() {
    wrapper.innerHTML = "";

    for (let i = 0; i < DUPLICATION_TIMES; i++) {
      originalSlides.forEach((slide) => {
        const clone = slide.cloneNode(true);
        clone.classList.add("is-duplicated");
        wrapper.appendChild(clone);
      });
    }
  }

  function restoreOriginalSlides() {
    wrapper.innerHTML = "";

    originalSlides.forEach((slide) => {
      wrapper.appendChild(slide.cloneNode(true));
    });
  }

  /* --------------------------------
       SWIPER INITIALIZERS
    -------------------------------- */

  function initDesktopSwiper() {
    if (typeof Swiper === "undefined") return;

    prepareDesktopSlides();

    swiperInstance = new Swiper(sliderEl, {
      direction: "vertical",
      slidesPerView: "auto",
      spaceBetween: 80,
      centeredSlides: true,
      loop: true,
      speed: 900,

      autoplay: {
        delay: 1500,
        disableOnInteraction: false,
      },

      watchSlidesProgress: true,
      grabCursor: true,
    });
    /*
    sliderEl.addEventListener("mouseenter", pauseAutoplay);
    sliderEl.addEventListener("mouseleave", resumeAutoplay);
    */
  }

  function initMobileSwiper() {
    if (typeof Swiper === "undefined") return;

    restoreOriginalSlides();

    swiperInstance = new Swiper(sliderEl, {
      direction: "horizontal",
      spaceBetween: 24,
      loop: false,
      grabCursor: true,

      breakpoints: {
        0: { slidesPerView: 1.2 },
        480: { slidesPerView: 1.3 },
        768: { slidesPerView: 1.5 },
      },
    });
  }

  /* --------------------------------
       AUTOPLAY CONTROL
    -------------------------------- */

  function pauseAutoplay() {
    swiperInstance?.autoplay?.stop();
  }

  function resumeAutoplay() {
    swiperInstance?.autoplay?.start();
  }

  /* --------------------------------
       RESPONSIVE HANDLER
    -------------------------------- */

  function updateSlider() {
    const shouldBeDesktop = window.innerWidth >= DESKTOP_BREAKPOINT;

    // Prevent unnecessary re-init
    if (shouldBeDesktop === isDesktop) return;

    isDesktop = shouldBeDesktop;

    if (swiperInstance) {
      swiperInstance.destroy(true, true);
      swiperInstance = null;
    }

    if (isDesktop) {
      initDesktopSwiper();
    } else {
      initMobileSwiper();
    }
  }

  /* --------------------------------
       INIT
    -------------------------------- */

  updateSlider();

  let resizeTimeout;
  window.addEventListener("resize", () => {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(updateSlider, 200);
  });
});

/* ==========================
   SLIDER  Carousel - Vertical END
   ========================== */

/* ==========================
   Accordion desk - Cards START
   ========================== */
document.addEventListener("DOMContentLoaded", () => {
  const root = document.querySelector(".block-menu-accordion-card-wrap");
  if (!root) return;

  const qs = (parent, selector) =>
    parent ? parent.querySelector(selector) : null;

  const qsa = (parent, selector) =>
    parent ? Array.from(parent.querySelectorAll(selector)) : [];

  const menuItems = qsa(root, ".item-menu-accordion-card-wrap");
  const contentItems = qsa(document, ".item-content-accordion-card");
  const globalProgress = qs(document, ".progress-block-green-tab");

  if (!menuItems.length || !contentItems.length) return;

  const LINE_DURATION = 600;
  const GLOBAL_DURATION = 1000;
  const CONTENT_DELAY = 80;

  let activeIndex = 0;
  let lineTimeout = null;

  function resetAllInstant() {
    clearTimeout(lineTimeout);

    menuItems.forEach((item, i) => {
      const line = qs(item, ".line-card-accordion");
      const bar = qs(item, ".progress-line-tab");
      const gradient = qs(item, ".gradient-text-accordion");
      const content = contentItems[i];

      line?.classList.remove("is-on");
      gradient?.classList.remove("is-on");

      if (bar) {
        bar.style.transition = "none";
        bar.style.width = "0%";
        bar.offsetWidth;
      }

      content?.classList.remove("is-visible", "is-active");
    });

    if (globalProgress) {
      globalProgress.style.transition = "none";
      globalProgress.style.width = "0%";
      globalProgress.offsetWidth;
    }
  }

  function activateIndex(index) {
    const item = menuItems[index];
    const content = contentItems[index];
    if (!item || !content) return; // 🛡️ index guard

    resetAllInstant();
    activeIndex = index;

    const line = qs(item, ".line-card-accordion");
    const bar = qs(item, ".progress-line-tab");
    const gradient = qs(item, ".gradient-text-accordion");

    line?.classList.add("is-on");
    gradient?.classList.add("is-on");

    if (bar) {
      bar.style.transition = "none";
      bar.style.width = "0%";
      bar.offsetWidth;
      bar.style.transition = `width ${LINE_DURATION}ms linear`;
      bar.style.width = "100%";
    }

    content.classList.add("is-visible");
    setTimeout(() => {
      content.classList.add("is-active");
    }, CONTENT_DELAY);

    lineTimeout = setTimeout(() => {
      if (!globalProgress) return;

      globalProgress.style.transition = "none";
      globalProgress.style.width = "0%";
      globalProgress.offsetWidth;
      globalProgress.style.transition = `width ${GLOBAL_DURATION}ms linear`;
      globalProgress.style.width = "100%";
    }, LINE_DURATION);
  }

  activateIndex(0);

  menuItems.forEach((item, index) => {
    item.addEventListener("mouseenter", () => {
      if (index === activeIndex) return;
      activateIndex(index);
    });
  });
});

/* ==========================
   Accordion desk - Cards END
   ========================== */

/* ==========================
   Accordion mob - Cards START
   ========================== */

document.addEventListener("DOMContentLoaded", () => {
  const BREAKPOINT = 991;
  if (window.innerWidth > BREAKPOINT) return;

  const root = document.querySelector(".block-menu-accordion-card-wrap");
  if (!root) return;

  const qs = (parent, selector) =>
    parent ? parent.querySelector(selector) : null;

  const qsa = (parent, selector) =>
    parent ? Array.from(parent.querySelectorAll(selector)) : [];

  const accordion = qs(root, ".block-menu-accordion-card");
  const accordionToggle = qs(root, ".block-item-mob");
  const arrow = qs(root, ".box-arrow-dd");

  const menuItems = qsa(root, ".item-menu-accordion-card-wrap");
  const contentItems = qsa(document, ".item-content-accordion-card");

  if (!accordion || !accordionToggle || !menuItems.length) return;

  let activeIndex = 0;

  function openAccordion() {
    accordion.classList.add("is-open");
    arrow?.classList.add("is-open");
  }

  function closeAccordion() {
    accordion.classList.remove("is-open");
    arrow?.classList.remove("is-open");
  }

  function toggleAccordion() {
    accordion.classList.contains("is-open")
      ? closeAccordion()
      : openAccordion();
  }

  function setActive(index) {
    const item = menuItems[index];
    const content = contentItems[index];
    if (!item || !content) return; // 🛡️ index guard

    activeIndex = index;

    menuItems.forEach((el, i) => {
      const gradient = qs(el, ".gradient-text-accordion");
      el.classList.toggle("is-active", i === index);
      gradient?.classList.toggle("is-on", i === index);
    });

    contentItems.forEach((el, i) => {
      el.classList.toggle("is-visible", i === index);
      el.classList.toggle("is-active", i === index);
    });

    const cloneSource = qs(item, ".item-menu-accordion-card");
    if (cloneSource) {
      accordionToggle.innerHTML = cloneSource.outerHTML;
    }
  }

  setActive(0);
  closeAccordion();

  accordionToggle.addEventListener("click", toggleAccordion);

  menuItems.forEach((item, index) => {
    item.addEventListener("click", () => {
      if (index === activeIndex) return;
      setActive(index);
      closeAccordion();
    });
  });
});

/* ==========================
   Accordion mob - Cards END
   ========================== */

/* ==========================
   ANIMATION CTA - Midroll START
   ========================== */
gsap.registerPlugin(ScrollTrigger);

document.addEventListener("DOMContentLoaded", () => {
  const block = document.querySelector(".block-cta-midroll");
  if (!block) return;

  gsap.set(block, {
    scale: 0.88,
    transformOrigin: "center center",
  });

  gsap.to(block, {
    scale: 1,
    scrollTrigger: {
      trigger: block,
      start: "top 85%",
      end: "bottom 50%",
      scrub: 1.2,
    },
  });
});
/* ==========================
   ANIMATION CTA - Midroll END
   ========================== */
/* =========================================
   Featured Tabs + Mobile Accordion (SAFE)
   ========================================= */

document.addEventListener("DOMContentLoaded", () => {
  const wrappers = document.querySelectorAll(
    ".block-resource-featured-wrapper"
  );
  if (!wrappers.length) return; // ❗ no component → no script

  const MOBILE_MQ = window.matchMedia("(max-width: 980px)");
  const CONTENT_DELAY = 30;

  wrappers.forEach((root) => {
    const menu = root.querySelector(".block-menu-filter-feature");
    if (!menu) return;

    const tabs = [...menu.querySelectorAll(".switch-box-feature")];
    const list = menu.querySelector(".felx-switch-list-feature");
    const dd = menu.querySelector(".dd-group-block-feature");
    const arrow = menu.querySelector(".box-arrow-feature");
    const contents = [
      ...root.querySelectorAll(
        ".content-featured-list .content-featured-wrapper"
      ),
    ];

    if (!tabs.length || !contents.length) return;

    let isOpen = false;

    /* ---------- helpers ---------- */

    function resetContents() {
      contents.forEach((c) => c.classList.remove("is-visible", "is-active"));
    }

    function mirrorTab(tab) {
      if (!dd) return;
      dd.innerHTML = tab.innerHTML;
    }

    function activateContent(index) {
      const content = contents[index];
      if (!content) return;

      resetContents();
      content.classList.add("is-visible");
      setTimeout(() => content.classList.add("is-active"), CONTENT_DELAY);
    }

    function activateTab(index, closeMobile = true) {
      const tab = tabs[index];
      if (!tab) return;

      tabs.forEach((t) => t.classList.remove("is-on"));
      tab.classList.add("is-on");

      activateContent(index);
      mirrorTab(tab);

      if (MOBILE_MQ.matches && closeMobile) closeAccordion();
    }

    /* ---------- mobile accordion ---------- */

    function openAccordion() {
      if (!list) return;

      isOpen = true;
      arrow?.classList.add("is-rotated");

      list.style.overflow = "hidden";
      list.style.height = "0px";
      list.offsetHeight;
      list.style.height = `${list.scrollHeight}px`;

      list.addEventListener(
        "transitionend",
        () => (list.style.height = "auto"),
        { once: true }
      );
    }

    function closeAccordion() {
      if (!list) return;

      isOpen = false;
      arrow?.classList.remove("is-rotated");

      list.style.overflow = "hidden";
      list.style.height = `${list.scrollHeight}px`;
      list.offsetHeight;
      list.style.height = "0px";
    }

    function toggleAccordion() {
      if (!MOBILE_MQ.matches || !list) return;
      isOpen ? closeAccordion() : openAccordion();
    }

    function setupMobile() {
      if (!list) return;

      if (MOBILE_MQ.matches) {
        list.style.height = "0px";
        list.style.overflow = "hidden";
        isOpen = false;
        arrow?.classList.remove("is-rotated");
      } else {
        list.style.height = "";
        list.style.overflow = "";
        isOpen = false;
        arrow?.classList.remove("is-rotated");
      }
    }

    /* ---------- bindings ---------- */

    tabs.forEach((tab, i) =>
      tab.addEventListener("click", () => activateTab(i))
    );

    dd?.addEventListener("click", toggleAccordion);
    arrow?.addEventListener("click", toggleAccordion);

    MOBILE_MQ.addEventListener("change", setupMobile);

    /* ---------- init ---------- */

    const startIndex =
      tabs.findIndex((t) => t.classList.contains("is-on")) || 0;

    activateTab(startIndex, false);
    setupMobile();
  });
});

/* ==========================
        DD new code START
   ========================== */

$(document).ready(function () {
  const MOBILE_MAX = 990; // < 991px

  $(".block-solution-wrapper").each(function () {
    const $wrapper = $(this);
    const $content = $wrapper.find(".block-content-solution").first();

    const $buttons = $wrapper.find(".button-solution");
    const $groups = $content.find("> .group-list-link-solution"); // direct children, keeps order

    const ACTIVE_DELAY = 80;
    const ANIM_SPEED = 200;

    if (!$buttons.length || !$groups.length) return;

    // --- Helpers
    function resetDesktopState() {
      $buttons.removeClass("is-on");
      $groups.removeClass("is-visible is-active").removeAttr("style");
    }

    function activateDesktopByIndex(index) {
      const $btn = $buttons.eq(index);
      const $grp = $groups.eq(index);
      if (!$btn.length || !$grp.length) return;

      resetDesktopState();

      $btn.addClass("is-on");
      $grp.addClass("is-visible");

      setTimeout(() => {
        $grp.addClass("is-active");
      }, ACTIVE_DELAY);
    }

    function closeAllMobile() {
      $buttons.removeClass("is-on");
      $groups
        .stop(true, true)
        .slideUp(ANIM_SPEED)
        .removeClass("is-visible is-active");
    }

    function openMobileIndex(index, animate = true) {
      const $btn = $buttons.eq(index);
      const $grp = $groups.eq(index);
      if (!$btn.length || !$grp.length) return;

      closeAllMobile();

      $btn.addClass("is-on");

      if (animate) {
        $grp.stop(true, true).slideDown(ANIM_SPEED, function () {
          $grp.addClass("is-visible is-active");
        });
      } else {
        $grp.show().addClass("is-visible is-active");
      }
    }

    function toggleMobileIndex(index) {
      const $btn = $buttons.eq(index);
      const $grp = $groups.eq(index);
      if (!$btn.length || !$grp.length) return;

      const isOpen = $btn.hasClass("is-on") && $grp.is(":visible");

      if (isOpen) {
        $btn.removeClass("is-on");
        $grp
          .stop(true, true)
          .slideUp(ANIM_SPEED)
          .removeClass("is-visible is-active");
      } else {
        openMobileIndex(index, true);
      }
    }

    // --- Mode switching
    function toMobile() {
      if ($wrapper.data("solutionMode") === "mobile") return;
      $wrapper.data("solutionMode", "mobile");

      // Remove desktop hover handlers
      $buttons.off(".solutionDesktop");

      // Move each group under its corresponding button (DOM transform)
      $buttons.each(function (i) {
        const $btn = $(this);
        const $grp = $groups.eq(i);
        if ($grp.length) {
          $grp.detach().insertAfter($btn).addClass("is-mobile-accordion");
        }
      });

      // Initial state (accordion): open first by default
      $groups.hide().removeClass("is-visible is-active");
      $buttons.removeClass("is-on");
      openMobileIndex(0, false);

      // Click = accordion toggle
      $buttons.off(".solutionMobile").on("click.solutionMobile", function (e) {
        e.preventDefault();
        const idx = $buttons.index(this);
        toggleMobileIndex(idx);
      });
    }

    function toDesktop() {
      if ($wrapper.data("solutionMode") === "desktop") return;
      $wrapper.data("solutionMode", "desktop");

      // Remove mobile click handlers
      $buttons.off(".solutionMobile");

      // Move groups back into the content container in the original order
      $groups.each(function () {
        $(this)
          .detach()
          .appendTo($content)
          .removeClass("is-mobile-accordion")
          .show();
      });

      // Desktop init: activate first and bind hover
      activateDesktopByIndex(0);

      $buttons
        .off(".solutionDesktop")
        .on("mouseenter.solutionDesktop", function () {
          const idx = $buttons.index(this);
          activateDesktopByIndex(idx);
        });
    }

    // --- Apply mode on load + resize (debounced)
    function applyMode() {
      if ($(window).width() <= MOBILE_MAX) toMobile();
      else toDesktop();
    }

    let resizeT;
    $(window).on("resize.solutionResize", function () {
      clearTimeout(resizeT);
      resizeT = setTimeout(applyMode, 150);
    });

    applyMode();
  });
});