function activateSelfDeactivateSibs(button) {
  if (button.classList.contains("active")) return;
  
  Array.from(button.parentNode.children).forEach(s => {
    if (s === button){
      button.classList.add('active');
    } else {
      s.classList.remove('active');
    }
    const targetId = s.dataset.targetId;
    const target = document.getElementById(targetId);
    
    if (!target) return;
    
    if (s.classList.contains('active')) {
      target.classList.add('active');
      target.dispatchEvent(new CustomEvent("tab-activated", {bubbles: false}))
    } else {
      target.classList.remove('active');
    }
  });
}

document.addEventListener("DOMContentLoaded", () => {
  // tabs
  document.querySelectorAll(".tab-button").forEach(button => {
    button.addEventListener("click", () => {
      activateSelfDeactivateSibs(button);
    });
  });
  
  // accordions
  const accordions = document.querySelectorAll(".accordion");
  accordions.forEach(accordion => {
    const header = accordion.querySelector(".accordion-header");
    const toggleButton = header.querySelector(".accordion-toggle");
    const content = accordion.querySelector(".accordion-content");
    
    const toggle = (e) => {
      e.stopPropagation();
      accordion.classList.toggle("hidden");
      content.classList.toggle("hidden");
      toggleButton.textContent = content.classList.contains("hidden") ? "►" : "▼"
    }
    
    toggleButton.addEventListener("click", toggle);
  });
});