document.addEventListener("DOMContentLoaded", () => {
  const header = document.querySelector("header");
  const body = document.querySelector("body");

  const getScrollThreshold = () => window.innerHeight * 0.25;

  const toggleHeaderClass = () => {
    const threshold = getScrollThreshold();
    if (window.scrollY > threshold) {
      header.classList.add("active");
      body.classList.add("active");
    } else {
      header.classList.remove("active");
      body.classList.remove("active");
    }
  };

  // Verificar al cargar la página
  toggleHeaderClass();

  // Verificar durante el scroll
  window.addEventListener("scroll", () => {
    requestAnimationFrame(toggleHeaderClass);
  });

  // Recalcular el threshold si la ventana cambia de tamaño
  window.addEventListener("resize", () => {
    toggleHeaderClass();
  });
});

/**********************************
 *  HEADER RESPONSIVE MENU
 * This script enables the functionality for a responsive navigation menu in the header,
 * particularly for mobile views. It toggles the visibility of the menu and adjusts
 * the page layout (like disabling scroll) when the menu is active.
 **********************************/

// Define selectors for targeting elements in the DOM.
const body = "body";
const headerClass = ".header";
const menuClassClick = ".menu-hamburger";
const menuClass = ".header-menu";
// Select all elements that should trigger the menu toggle when clicked.
const menuClick = document.querySelectorAll(menuClassClick);

// Attach click event listeners to each menu toggle trigger.
[].forEach.call(menuClick, function (event) {
  event.addEventListener(
    "click",
    function (e) {
      e.preventDefault(); // Prevent the default action to ensure smooth operation.

      // Use event delegation to handle the click event efficiently.
      const target = e.target;

      // Toggle the 'active' class on the menu button to change its appearance.
      target.closest(menuClassClick).classList.toggle("active");
      // Toggle the 'active' class on the header to adjust its layout or style.
      target.closest(headerClass).classList.toggle("active");
      // Toggle the 'active' class on the menu to show or hide it.
      document.querySelector(menuClass).classList.toggle("active");
      // Toggle a class on the body to prevent scrolling when the menu is open.
      target.closest(body).classList.toggle("overflow-hidden");
    },
    false
  );
});


document.addEventListener("DOMContentLoaded", () => {
  const headers = document.querySelectorAll(".header-main");
  const headerClickElements = document.querySelectorAll(".header-click");
  const headerCloseElements = document.querySelectorAll(".header-close");

  const showHeaders = () => {
    headers.forEach((header) => {
      header.classList.add("active");
    });
  };

  const hideHeaders = () => {
    headers.forEach((header) => {
      header.classList.remove("active");
    });
  };

  headerClickElements.forEach((element) => {
    element.addEventListener("click", showHeaders);
  });

  headerCloseElements.forEach((element) => {
    element.addEventListener("click", hideHeaders);
  });
});

document.addEventListener("mouseup", (e) => {
  const container = document.querySelector(".header-main");

  if (container && !container.contains(e.target) && e.target !== container) {
    container.classList.remove("active");
  }
});