---
/**
 * Header — the logo, the main links and an optional action button. Below
 * 860px the links move into a full-screen menu opened by a menu button.
 * logo: { href, label, svg? } — label names the link; the mark is the
 *   `logo` slot (an <img alt="">, say) or an svg string.
 * links: { href, label }[] — the main links.
 * action: { href, label } — drawn as a secondary Button with an arrow.
 * root: prefix for every href; '/' on pages in a folder.
 * Behaviour (the script below): the header gets .scrolled once the page
 * scrolls and .is-hidden while reading down; same-page links get
 * aria-current for the section in view and scroll smoothly; the menu
 * button opens and closes the menu, and Escape closes it.
 */
import Button from './Button.astro';
import MenuButton from './MenuButton.astro';
interface Link { href: string; label: string }
interface Props {
  logo: { href: string; label: string; svg?: string };
  links?: Link[];
  action?: { href: string; label: string };
  root?: string;
}
const { logo, links = [], action, root = '' } = Astro.props;
---
{/* The script comes first, so the header stays next to what follows it (the site reads .site-header:has(+ main …)). */}
<script>
  document.querySelectorAll<HTMLElement>('.site-header').forEach((header) => {
    // Scroll state: .scrolled once the page moves; .is-hidden while reading
    // down, back on any scroll up. Near the top, or with the menu open, it stays.
    const SLACK = 6;                                   // ignore trackpad jitter
    let lastY = Math.max(0, window.scrollY);

    // Where the page snaps to sections, the snap settles after the reader
    // lets go, often against the way they were going. So the reader's input
    // sets the direction (+1 down, -1 up) and movement against it is the
    // snap. 0 accepts either way: scrollbar drags and in-page link jumps.
    // Where the page doesn't snap, every scroll is the reader's: on iOS a
    // finger that stops a fling reaches neither pointerdown nor touchmove.
    let intent = 0;
    let snaps = false;
    const readSnap = () => {
      snaps = getComputedStyle(document.documentElement).scrollSnapType !== 'none';
    };
    readSnap();
    window.addEventListener('resize', readSnap, { passive: true });
    const DOWN_KEYS = ['ArrowDown', 'PageDown', 'End'];
    const UP_KEYS = ['ArrowUp', 'PageUp', 'Home'];
    window.addEventListener('wheel', (e) => {
      if (e.deltaY) intent = Math.sign(e.deltaY);
    }, { passive: true });
    let touchY: number | null = null;
    window.addEventListener('touchstart', (e) => { touchY = e.touches[0].clientY; intent = 0; }, { passive: true });
    window.addEventListener('touchmove', (e) => {
      if (touchY === null) return;
      const dy = touchY - e.touches[0].clientY;        // finger up = page down
      if (Math.abs(dy) < SLACK) return;
      intent = Math.sign(dy);
      touchY = e.touches[0].clientY;
    }, { passive: true });
    window.addEventListener('keydown', (e) => {
      const t = e.target as Element | null;
      if (t && t.closest && t.closest('input, textarea, select, [contenteditable]')) return;
      if (e.key === ' ') intent = e.shiftKey ? -1 : 1;
      else if (DOWN_KEYS.includes(e.key)) intent = 1;
      else if (UP_KEYS.includes(e.key)) intent = -1;
    });
    window.addEventListener('pointerdown', () => { intent = 0; }, { passive: true });

    const onScroll = () => {
      // clamp so iOS overscroll bounce does not read as a direction change
      const maxY = document.documentElement.scrollHeight - window.innerHeight;
      const y = Math.min(Math.max(0, window.scrollY), maxY);
      header.classList.toggle('scrolled', y > 8);

      if (y <= header.offsetHeight || document.body.classList.contains('nav-open')) {
        header.classList.remove('is-hidden');
        lastY = y;
        return;
      }
      if (Math.abs(y - lastY) < SLACK) return;
      const dir = Math.sign(y - lastY);
      lastY = y;
      if (snaps && intent && dir !== intent) return;  // the snap settling
      header.classList.toggle('is-hidden', dir > 0);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });

    // Current section: same-page links only (a link to another page's
    // #top must not scroll this one). Whichever section covers the middle
    // of the viewport gets aria-current; the jumps scroll smoothly.
    const links = [...header.querySelectorAll<HTMLAnchorElement>('.nav-link')];
    const targets = links
      .map((a) => {
        const href = a.getAttribute('href') || '';
        return { link: a, el: href.charAt(0) === '#' ? document.querySelector<HTMLElement>(href) : null };
      })
      .filter((t): t is { link: HTMLAnchorElement; el: HTMLElement } => !!t.el);

    if (targets.length) {
      const setActive = (link: HTMLAnchorElement) => {
        links.forEach((l) => {
          const on = l === link;
          l.classList.toggle('is-active', on);
          if (on) l.setAttribute('aria-current', 'true');
          else l.removeAttribute('aria-current');
        });
      };
      const pickActive = () => {
        const mid = window.scrollY + window.innerHeight / 2;
        let current = targets[0];
        targets.forEach((t) => { if (t.el.offsetTop <= mid) current = t; });
        setActive(current.link);
      };
      let ticking = false;
      const onMove = () => {
        if (ticking) return;
        ticking = true;
        requestAnimationFrame(() => { pickActive(); ticking = false; });
      };
      pickActive();
      window.addEventListener('scroll', onMove, { passive: true });
      window.addEventListener('resize', onMove, { passive: true });

      targets.forEach(({ link, el }) => {
        link.addEventListener('click', (e) => {
          if (e.metaKey || e.ctrlKey || e.shiftKey || e.button) return;
          e.preventDefault();
          el.scrollIntoView({
            behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth',
            block: 'start',
          });
          history.replaceState(null, '', link.getAttribute('href'));
        });
      });
    }

    // Mobile menu: below 860px the links live in a full-screen panel that
    // behaves like a dialog. A chosen link or Escape closes it.
    const toggle = header.querySelector<HTMLElement>('.nav-toggle');
    const panel = header.querySelector<HTMLElement>('.nav');
    if (toggle && panel) {
      const label = toggle.querySelector('.nav-toggle-text');
      const setOpen = (open: boolean) => {
        panel.classList.toggle('is-open', open);
        document.body.classList.toggle('nav-open', open);
        toggle.setAttribute('aria-expanded', String(open));
        if (label) label.textContent = open ? 'Close' : 'Menu';
      };
      toggle.addEventListener('click', () => setOpen(toggle.getAttribute('aria-expanded') !== 'true'));
      panel.addEventListener('click', (e) => { if ((e.target as Element).closest('a')) setOpen(false); });
      document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && toggle.getAttribute('aria-expanded') === 'true') {
          setOpen(false);
          toggle.focus();
        }
      });
      // widening past the breakpoint must not leave the body locked
      const mq = window.matchMedia('(max-width: 860px)');
      mq.addEventListener('change', () => { if (!mq.matches) setOpen(false); });
    }
  });
</script>
<header class="site-header">
  <div class="wrap">
    <a class="brand" href={`${root}${logo.href}`} aria-label={logo.label}>
      {logo.svg ? <Fragment set:html={logo.svg} /> : <slot name="logo" />}
    </a>
    <MenuButton class="nav-toggle" iconClass="nav-toggle-icon" type="button" aria-expanded="false" aria-controls="site-nav">
      <span class="nav-toggle-text visually-hidden">Menu</span>
    </MenuButton>
    <nav class="nav" id="site-nav" aria-label="Sections">
      {links.map((l) => <Fragment><a class="nav-link" href={`${root}${l.href}`}>{l.label}</a>{'\n      '}</Fragment>)}
      {action && <Button href={`${root}${action.href}`} arrow>{action.label}</Button>}
    </nav>
  </div>
</header>