document.addEventListener("DOMContentLoaded", () => {
  const tabsModules = document.querySelectorAll("[data-tabs]");

  tabsModules.forEach((module) => {
    const btns = module.querySelectorAll("[data-tabs-btn]");
    const panes = module.querySelectorAll("[data-tabs-pane]");

    function openTab(tabId) {
      btns.forEach((btn) => {
        btn.classList.toggle(
          "is-active",
          btn.getAttribute("data-tabs-btn") === tabId,
        );
      });

      panes.forEach((pane) => {
        if (pane.getAttribute("data-tabs-pane") === tabId) {
          pane.style.display = "block";

          const swiperElements = pane.querySelectorAll(".swiper");
          swiperElements.forEach((el) => {
            if (el.swiper) {
              el.swiper.update();
            }
          });

          window.dispatchEvent(new Event("resize"));
        } else {
          pane.style.display = "none";
        }
      });
    }

    btns.forEach((btn) => {
      btn.addEventListener("click", () => {
        openTab(btn.getAttribute("data-tabs-btn"));
      });
    });

    const initialBtn =
      module.querySelector('[data-tab-initial="true"]') || btns[0];
    if (initialBtn) {
      setTimeout(() => {
        openTab(initialBtn.getAttribute("data-tabs-btn"));
      }, 50);
    }
  });
});