(() => {
  const HEADER_SELECTOR = '.app-header';
  const HIDDEN_CLASS = 'app-header--hidden';
  const MOBILE_BREAKPOINT = 960;
  const SCROLL_THRESHOLD = 12;

  let lastScrollY = window.scrollY || window.pageYOffset || 0;
  let isHidden = false;

  const header = document.querySelector(HEADER_SELECTOR);
  if (!header) {
    return;
  }

  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');

  const shouldEnable = () => window.innerWidth <= MOBILE_BREAKPOINT && !prefersReducedMotion.matches;

  const showHeader = (force = false) => {
    if (isHidden || force) {
      header.classList.remove(HIDDEN_CLASS);
      isHidden = false;
    }
  };

  const hideHeader = () => {
    if (!isHidden) {
      header.classList.add(HIDDEN_CLASS);
      isHidden = true;
    }
  };

  const handleScroll = () => {
    const currentY = window.scrollY || window.pageYOffset || 0;

    if (!shouldEnable() || currentY <= 0) {
      showHeader(true);
      lastScrollY = currentY;
      return;
    }

    const delta = currentY - lastScrollY;

    if (Math.abs(delta) <= SCROLL_THRESHOLD) {
      lastScrollY = currentY;
      return;
    }

    if (delta > 0) {
      hideHeader();
    } else {
      showHeader();
    }

    lastScrollY = currentY;
  };

  const handleResize = () => {
    lastScrollY = window.scrollY || window.pageYOffset || 0;
    if (!shouldEnable()) {
      showHeader(true);
    }
  };

  window.addEventListener('scroll', handleScroll, { passive: true });
  window.addEventListener('resize', handleResize);

  if (typeof prefersReducedMotion.addEventListener === 'function') {
    prefersReducedMotion.addEventListener('change', handleResize);
  } else if (typeof prefersReducedMotion.addListener === 'function') {
    prefersReducedMotion.addListener(handleResize);
  }

  handleResize();
})();