/* =====================================================
   Curso de Vóley — Material de Estudio
   JavaScript principal
   ===================================================== */

(function () {
  "use strict";

  // ── Sidebar toggle (móvil) ──
  const hamburger = document.getElementById("hamburger");
  const sidebar = document.getElementById("sidebar");
  const overlay = document.getElementById("sidebar-overlay");

  if (hamburger && sidebar && overlay) {
    hamburger.addEventListener("click", () => {
      sidebar.classList.toggle("open");
      overlay.classList.toggle("open");
    });

    overlay.addEventListener("click", () => {
      sidebar.classList.remove("open");
      overlay.classList.remove("open");
    });

    // Cerrar sidebar al hacer clic en un enlace (móvil)
    sidebar.querySelectorAll("a").forEach((link) => {
      link.addEventListener("click", () => {
        if (window.innerWidth <= 900) {
          sidebar.classList.remove("open");
          overlay.classList.remove("open");
        }
      });
    });
  }

  // ── Navegación activa por scroll ──
  const sections = document.querySelectorAll(".seccion-titulo");
  const navLinks = document.querySelectorAll(".sidebar-nav a[data-section]");

  if (sections.length && navLinks.length) {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            navLinks.forEach((link) => link.classList.remove("active"));
            const id = entry.target.id;
            const activeLink = document.querySelector(
              '.sidebar-nav a[data-section="' + id + '"]',
            );
            if (activeLink) {
              activeLink.classList.add("active");
              activeLink.scrollIntoView({
                block: "nearest",
                behavior: "smooth",
              });
            }
          }
        });
      },
      { rootMargin: "-10% 0px -80% 0px" },
    );

    sections.forEach((section) => observer.observe(section));
  }

  // ── Colapsar/expandir videos y PDFs ──
  document.addEventListener("click", function (e) {
    const header = e.target.closest(".video-viewer-header, .pdf-viewer-header");
    if (header) {
      header.parentElement.classList.toggle("collapsed");
    }
  });
})();