document.addEventListener('DOMContentLoaded', () => {
  const header = document.querySelector('[ou-header]');
  const footer = document.querySelector('[ou-footer]');
  if (!header) return;

  const HIDE_ON_SCROLL = true;   // hide on scroll down, show on scroll up
  const FOOTER_HIDES   = true;   // hide when footer enters viewport
  const THRESHOLD_PCT  = 5;      // % of page height before header can hide
  const REVEAL_UP_PCT  = 5;      // % of viewport height to scroll up before showing again

  let lastY = window.scrollY;
  let minScrollY = window.scrollY;
  let footerVisible = false;
  let headerHidden = false;

  const getThresholds = () => ({
    threshold: document.body.scrollHeight * (THRESHOLD_PCT / 100),
    revealUp: window.innerHeight * (REVEAL_UP_PCT / 100)
  });

  let { threshold, revealUp } = getThresholds();

  const toggleHeader = hide => {
    if (hide === headerHidden) return;
    headerHidden = hide;
    header.classList.toggle('is-hidden', hide);
  };

  const update = () => {
    const y = window.scrollY;
    const goingDown = y > lastY;

    if (!HIDE_ON_SCROLL) {
      if (FOOTER_HIDES && footerVisible) toggleHeader(true);
      else toggleHeader(false);
      lastY = y;
      return;
    }

    if (FOOTER_HIDES && footerVisible) {
      toggleHeader(true);
      lastY = y;
      return;
    }

    if (goingDown) {
      if (y > threshold) {
        toggleHeader(true);
        minScrollY = y;
      }
    } else {
      if (minScrollY - y > revealUp || y <= threshold) toggleHeader(false);
    }

    lastY = y;
  };

  if (footer) {
    const io = new IntersectionObserver(entries => {
      footerVisible = entries.some(e => e.isIntersecting);
      update();
    }, { threshold: 0.01 });
    io.observe(footer);
  }

  window.addEventListener('resize', () => {
    ({ threshold, revealUp } = getThresholds());
    update();
  }, { passive: true });

  window.addEventListener('scroll', update, { passive: true });
  update();
});