const tabIndicator = document.querySelector("#tab-indicator");
const tabs = document.querySelectorAll(".tab");
const pages = document.querySelectorAll(".page");
let activeIndex = 0;

function activate(index) {
  activeIndex = index;
  const button = tabs[index];

  // Fais glisser l'indicateur derrière le bouton focus
  tabIndicator.style.left = button.offsetLeft + "px";
  tabIndicator.style.width = button.offsetWidth + "px";

  // Change la couleur du texte et affiche la target page
  tabs.forEach((tab, i) => {
    tab.style.color = (i === index) ? "white" : "var(--color-secondary)";
    tab.style.fontWeight = (i === index) ? "600" : "400";
  });
  pages.forEach((page, i) => {
    if (i === index) page.classList.remove("max-sm:hidden");
    else page.classList.add("max-sm:hidden");
  })
}

// Initialisation du click event des tabs
tabs.forEach((tab, i) => {
  tab.addEventListener("click", () => activate(i));
});

// Mets l'indicateur sur la première page et un resize auto
requestAnimationFrame(() => activate(0));
window.addEventListener("resize", () => activate(activeIndex));