document.addEventListener("DOMContentLoaded", function () {
  const selectItemsPC = document.querySelectorAll(
    ".aiEmpower-section-2-select .aiEmpower-select-item"
  );
  const imagesPC = document.querySelectorAll(
    ".aiEmpower-section-2-item .aiEmpower-section-2-image"
  );
  const selectItemsMobile = document.querySelectorAll(
    ".aiEmpower-section-2-select-mobile .aiEmpower-select-item"
  );
  let currentIndex = 0;
  let autoPlayTimer = null;
  let isHovering = false;

  function switchTo(index) {
    selectItemsPC.forEach((el) => el.classList.remove("active"));
    selectItemsPC[index]?.classList.add("active");

    imagesPC.forEach((img) => {
      img.style.transition = "opacity 0.6s ease-in-out";
      img.style.opacity = "0";
    });
    if (imagesPC[index]) {
      imagesPC[index].style.transition = "opacity 0.6s ease-in-out";
      imagesPC[index].style.opacity = "1";
    }

    selectItemsMobile.forEach((el) => el.classList.remove("active"));
    selectItemsMobile[index]?.classList.add("active");

    currentIndex = index;
  }

  function startAutoPlay() {
    if (autoPlayTimer) clearInterval(autoPlayTimer);
    autoPlayTimer = setInterval(() => {
      if (!isHovering) {
        const nextIndex = (currentIndex + 1) % selectItemsPC.length;
        switchTo(nextIndex);
      }
    }, 5000);
  }

  function stopAutoPlay() {
    if (autoPlayTimer) clearInterval(autoPlayTimer);
  }

  selectItemsPC.forEach((item, index) => {
    item.addEventListener("mouseenter", function () {
      isHovering = true;
      stopAutoPlay();
      switchTo(index);
    });

    item.addEventListener("mouseleave", function () {
      isHovering = false;
      startAutoPlay();
    });
  });

  selectItemsMobile.forEach((item, index) => {
    item.addEventListener("click", function (e) {
      e.stopPropagation();
      stopAutoPlay();
      switchTo(index);
      startAutoPlay();
    });
  });

  startAutoPlay();
});