/* ========== SMOOTH SCROLL TO SECTION ========== */
function scrollToSection(sectionId) {
  const section = document.getElementById(sectionId);
  if (section) {
    section.scrollIntoView({ behavior: "smooth" });
    updateActiveTab(sectionId);
  }
}

/* ========== UPDATE ACTIVE TAB ========== */
function updateActiveTab(sectionId) {
  const allTabs = document.querySelectorAll(".philosophy-tab");
  allTabs.forEach((tab) => {
    tab.classList.remove("active");
  });

  const activeTab = document.querySelector(
    `[data-tab="${sectionId.split("-")[0]}"]`
  );
  if (activeTab) {
    activeTab.classList.add("active");
  }
}

/* ========== INTERSECTION OBSERVER FOR ACTIVE TAB ========== */
const options = {
  root: null,
  rootMargin: "0px 0px -50% 0px",
  threshold: 0,
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      updateActiveTab(entry.target.id);
    }
  });
}, options);

// Observe all sections
document.querySelectorAll(".philosophy-item").forEach((item) => {
  observer.observe(item);
});

/* ========== KEYBOARD NAVIGATION ========== */
const philTabs = document.querySelectorAll(".philosophy-tab");
philTabs.forEach((tab, index) => {
  tab.addEventListener("keydown", (e) => {
    if (e.key === "ArrowLeft") {
      const prevIndex = (index - 1 + philTabs.length) % philTabs.length;
      philTabs[prevIndex].click();
      philTabs[prevIndex].focus();
    } else if (e.key === "ArrowRight") {
      const nextIndex = (index + 1) % philTabs.length;
      philTabs[nextIndex].click();
      philTabs[nextIndex].focus();
    }
  });
});
