/*Slider swiper for hero START*/

var heroSwiper = new Swiper("#hero-slider", {
  slidesPerView: 1,
  a11y: true,
  grabCursor: true,
  loop: false,
  spaceBetween: 32,
  speed: 500,
  fadeEffect: { crossFade: true },
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
  navigation: {
    nextEl: "#home-arrow-slider-next",
    prevEl: "#home-arrow-slider-prev",
  },
  pagination: {
    el: ".slider-and-paginations-hero .swiper-bullet-wrapper.is-slider-main",
    clickable: true,
    bulletClass: "swiper-bullet",
    bulletActiveClass: "is_active_hero",
  },
  initialSlide: 0,
  breakpoints: {
    991: { slidesPerView: 1 },
    767: { slidesPerView: 1, spaceBetween: 24 },
    320: { slidesPerView: 1, spaceBetween: 24 },
  },
});

/*Slider swiper for hero END*/

/*Tab hero START*/

let activeTab = 0;
let interval;
const tabs = document.querySelectorAll(".tab_switch");
const blocks = document.querySelectorAll(".block_tab");
const totalTabs = tabs.length;

// Start auto-switching interval
const startAutoSwitching = () => {
  clearInterval(interval);
  interval = setInterval(() => {
    switchTab((activeTab + 1) % totalTabs);
  }, 20000);
};

// Stop auto-switching and reset progress bars
const stopAutoSwitching = () => {
  clearInterval(interval);
  document.querySelectorAll(".green_time").forEach((gt) => {
    gt.style.transition = "none";
    gt.style.width = "0%";
    gt.style.zIndex = "-1";
  });
};

function switchTab(index) {
  // Remove active state from all tabs and reset progress bars
  tabs.forEach((tab) => {
    tab.classList.remove("active");
    const gt = tab.querySelector(".green_time");
    if (gt) {
      gt.style.transition = "none";
      gt.style.width = "0%";
      gt.style.zIndex = "-1";
    }
  });

  // Hide all blocks
  blocks.forEach((block) => {
    block.classList.remove("active", "visible");
    block.style.display = "none";
  });

  // Select the new tab and block
  const newTab = document.querySelector(`.tab_switch[data-tab="${index + 1}"]`);
  const newBlock = document.querySelector(
    `.block_tab[data-tab="${index + 1}"]`
  );
  if (!newTab || !newBlock) return;

  newTab.classList.add("active");

  newBlock.style.display = "grid";
  requestAnimationFrame(() => {
    newBlock.classList.add("active", "visible");
  });

  // Progress bar animation (desktop only)
  const progress = newTab.querySelector(".green_time");
  if (progress && window.innerWidth > 767) {
    progress.style.transition = "none";
    progress.style.width = "0%";
    progress.style.zIndex = "1";
    void progress.offsetWidth; // force reflow
    progress.style.transition = "width 20s linear";
    progress.style.width = "100%";
  }

  activeTab = index;
  if (window.innerWidth > 767) startAutoSwitching();
}

function handleResize() {
  if (window.innerWidth <= 767) stopAutoSwitching();
  else switchTab(activeTab);
}

document.addEventListener("DOMContentLoaded", () => {
  tabs.forEach((tab, i) => {
    tab.addEventListener("click", () => switchTab(i));
  });
  handleResize();
});
window.addEventListener("resize", handleResize);

// Sync active tabs visually
const tabSwitches = document.querySelectorAll(".tab_switch");

tabSwitches.forEach((tab) => {
  tab.addEventListener("click", () => {
    tabSwitches.forEach((t) => t.classList.remove("active"));
    tab.classList.add("active");
  });
});

/*Tab switch END*/

/*Auto tabs script START*/
document.addEventListener("DOMContentLoaded", () => {
  // For each container with auto_tab
  document.querySelectorAll("[auto_tab]").forEach((ctWrapper) => {
    let ct_activeIndex = 0;
    let ct_timerId;
    const ct_tabs = ctWrapper.querySelectorAll(".tab_switch");
    const ct_images = ctWrapper.querySelectorAll(".data-tab-wrap");
    const ct_total = ct_tabs.length;
    const ct_intervalMs = 5000;

    // Start or restart the auto-switching interval
    function ct_startAuto() {
      clearInterval(ct_timerId);
      ct_timerId = setInterval(() => {
        ct_show((ct_activeIndex + 1) % ct_total);
      }, ct_intervalMs);
    }

    // Show a tab and image by index
    function ct_show(idx) {
      // 1) Reset all tabs and progress bars
      ct_tabs.forEach((tab) => {
        tab.classList.remove("active");
        const bar = tab.querySelector(".green_time");
        if (bar) {
          bar.style.transition = "none";
          bar.style.width = "0%";
          bar.style.zIndex = "-1";
        }
      });

      // 2) Hide all images
      ct_images.forEach((img) => {
        img.classList.remove("active", "visible");
        img.style.display = "none";
      });

      // 3) Activate selected tab
      const selTab = ctWrapper.querySelector(
        `.tab_switch[data-tab="${idx + 1}"]`
      );
      const selImg = ctWrapper.querySelector(
        `.data-tab-wrap[data-tab="${idx + 1}"]`
      );
      if (!selTab || !selImg) return;

      selTab.classList.add("active");

      // 4) Show the matching image
      selImg.style.display = "block";
      requestAnimationFrame(() => {
        selImg.classList.add("active", "visible");
      });

      // 5) Animate progress bar (on all devices)
      const progress = selTab.querySelector(".green_time");
      if (progress) {
        progress.style.transition = "none";
        progress.style.width = "0%";
        progress.style.zIndex = "1";
        void progress.offsetWidth; // force reflow
        progress.style.transition = `width ${ct_intervalMs / 1000}s linear`;
        progress.style.width = "100%";
      }

      ct_activeIndex = idx;
      ct_startAuto();
    }

    // Click handler
    ct_tabs.forEach((tab, i) => {
      tab.addEventListener("click", () => ct_show(i));
    });

    // Update visible tab on resize
    window.addEventListener("resize", () => ct_show(ct_activeIndex));

    // Initial show + auto start
    ct_show(0);
  });
});

/*Auto tabs script END*/

/*Show solution menu START*/

// Find the solution tab section
const tabSection = document.querySelector(".component_solution_tab");

if (tabSection) {
  // Register GSAP and ScrollTrigger only if the tab exists
  gsap.registerPlugin(ScrollTrigger);

  // Create ScrollTrigger to toggle menu visibility
  ScrollTrigger.create({
    trigger: tabSection, // pass the element itself
    start: "top 50%", // when the top of the tab reaches 50% of viewport
    end: "bottom 80%", // when the bottom reaches 80% of viewport
    toggleClass: {
      targets: ".solutions-menu-on-off",
      className: "is-active",
    },
    // markers: true, // uncomment for debugging
  });
}
/*Show solution menu END*/