Store Header

---
/**
 * StoreHeader — Shop navigation bar: brand, menu with category dropdowns, search,
 * account link and a cart button whose badge follows the cart store live.
 *
 * @param {string} brand - Store name. Default 'Nova Store'.
 * @param {string} brandHref - Brand link. Default '/'.
 * @param {Array} links - Menu items `{ label, href, children?: { label, href, description? }[] }`.
 * @param {string} searchAction - Search form action URL. Default '#'.
 * @param {string} searchPlaceholder - Search placeholder. Default 'Search products'.
 * @param {string} accountHref - Account link (hidden when empty). Default '#'.
 * @param {string} cartKey - Cart storage key. Default 'ack-cart'.
 * @param {string} cartLabel - Accessible label for the cart button. Default 'Cart'.
 * @param {string} currentHref - Marks the matching menu link with aria-current.
 * @param {boolean} sticky - Stick to the top on scroll. Default true.
 * @param {string} variant - Style (glass|solid|transparent). Default 'glass'.
 * @param {string} size - Height (sm|md|lg). Default 'md'.
 * @param {boolean} themeToggle - Show a light/dark toggle (sets html[data-theme], remembered in localStorage). Default true.
 * @param {string} id - Base id for inner elements (unique per page). Default 'store-header'.
 * @param {string} className - Extra class.
 *
 * Accessibility: dropdowns are disclosure buttons (aria-expanded) closed with Escape or outside click;
 * the mobile menu is a disclosure too; the cart badge count is part of the button label.
 * Clicking the cart button dispatches `ack:cart-open`, which CartDrawer listens to.
 */
interface ChildLink { label: string; href: string; description?: string }
interface NavLink { label: string; href: string; children?: ChildLink[] }

interface Props {
  brand?: string;
  brandHref?: string;
  links?: NavLink[];
  searchAction?: string;
  searchPlaceholder?: string;
  accountHref?: string;
  cartKey?: string;
  cartLabel?: string;
  currentHref?: string;
  sticky?: boolean;
  variant?: 'glass' | 'solid' | 'transparent';
  size?: 'sm' | 'md' | 'lg';
  themeToggle?: boolean;
  id?: string;
  className?: string;
}

const {
  brand = 'Nova Store',
  brandHref = '/',
  links = [
    {
      label: 'Shop',
      href: '#',
      children: [
        { label: 'Audio', href: '#', description: 'Headphones & speakers' },
        { label: 'Wearables', href: '#', description: 'Watches & bands' },
        { label: 'Bags', href: '#', description: 'Backpacks & totes' },
        { label: 'Home', href: '#', description: 'Lamps, mugs & plants' },
      ],
    },
    { label: 'New in', href: '#' },
    { label: 'Sale', href: '#' },
    { label: 'Journal', href: '#' },
  ],
  searchAction = '#',
  searchPlaceholder = 'Search products',
  accountHref = '#',
  cartKey = 'ack-cart',
  cartLabel = 'Cart',
  currentHref,
  sticky = true,
  variant = 'glass',
  size = 'md',
  themeToggle = true,
  id = 'store-header',
  className = '',
} = Astro.props;

const uid = id;
---

<header class:list={['store-header', `store-header--${variant}`, `store-header--${size}`, { 'store-header--sticky': sticky }, className]} data-store-header>
  <div class="store-header__inner">
    {links.length > 0 && (
    <button class="store-header__toggle" type="button" aria-expanded="false" aria-controls={`${uid}-nav`} aria-label="Menu" data-menu-toggle>
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path class="l1" d="M4 7h16"/><path class="l2" d="M4 12h16"/><path class="l3" d="M4 17h16"/></svg>
    </button>
    )}

    <a class="store-header__brand" href={brandHref}>
      <span class="store-header__logo" aria-hidden="true">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 3 7v10l9 5 9-5V7z"/><path d="m3 7 9 5 9-5M12 12v10"/></svg>
      </span>
      <span>{brand}</span>
    </a>

    {links.length > 0 ? (
    <nav class="store-header__nav" id={`${uid}-nav`} aria-label="Main" data-menu>
      <ul class="store-header__links">
        {links.map((link, i) => (
          <li class="store-header__item">
            {link.children?.length ? (
              <>
                <button class="store-header__link store-header__link--parent" type="button" aria-expanded="false" aria-controls={`${uid}-dd-${i}`} data-dropdown-toggle>
                  {link.label}
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
                </button>
                <div class="store-header__dropdown" id={`${uid}-dd-${i}`} hidden data-dropdown>
                  <ul>
                    {link.children.map((child) => (
                      <li>
                        <a href={child.href} aria-current={currentHref === child.href ? 'page' : undefined}>
                          <strong>{child.label}</strong>
                          {child.description && <span>{child.description}</span>}
                        </a>
                      </li>
                    ))}
                    <li class="store-header__dropdown-all"><a href={link.href}>View all →</a></li>
                  </ul>
                </div>
              </>
            ) : (
              <a class="store-header__link" href={link.href} aria-current={currentHref === link.href ? 'page' : undefined}>{link.label}</a>
            )}
          </li>
        ))}
      </ul>
    </nav>
    ) : <div class="store-header__nav" />}

    <div class="store-header__actions">
      <form class="store-header__search" role="search" action={searchAction}>
        <label class="sr-only" for={`${uid}-q`}>{searchPlaceholder}</label>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
        <input id={`${uid}-q`} name="q" type="search" placeholder={searchPlaceholder} autocomplete="off" />
      </form>
      {themeToggle && (
        <button class="store-header__icon store-header__theme" type="button" aria-label="Switch to light theme" data-theme-toggle>
          <svg class="i-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
          <svg class="i-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
        </button>
      )}
      {accountHref && (
        <a class="store-header__icon" href={accountHref} aria-label="Account">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>
        </a>
      )}
      <button class="store-header__icon store-header__cart" type="button" data-cart-open data-cart-key={cartKey} data-cart-label={cartLabel} aria-label={cartLabel}>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 7h12l-1 13H7z"/><path d="M9 7V6a3 3 0 0 1 6 0v1"/></svg>
        <span class="store-header__count" data-cart-count hidden aria-hidden="true">0</span>
      </button>
    </div>
  </div>
</header>

<script>
  import { createCart } from './cart-store';

  document.querySelectorAll<HTMLElement>('[data-store-header]:not([data-bound])').forEach((header) => {
    header.dataset.bound = '';
    const toggle = header.querySelector<HTMLButtonElement>('[data-menu-toggle]');
    const menu = header.querySelector<HTMLElement>('[data-menu]');
    const dropdownToggles = Array.from(header.querySelectorAll<HTMLButtonElement>('[data-dropdown-toggle]'));

    const closeDropdowns = (except?: HTMLButtonElement) => {
      dropdownToggles.forEach((btn) => {
        if (btn === except) return;
        btn.setAttribute('aria-expanded', 'false');
        const panel = document.getElementById(btn.getAttribute('aria-controls') || '');
        if (panel) panel.hidden = true;
      });
    };

    dropdownToggles.forEach((btn) => {
      btn.addEventListener('click', () => {
        const open = btn.getAttribute('aria-expanded') !== 'true';
        closeDropdowns(btn);
        btn.setAttribute('aria-expanded', String(open));
        const panel = document.getElementById(btn.getAttribute('aria-controls') || '');
        if (panel) panel.hidden = !open;
      });
    });

    toggle?.addEventListener('click', () => {
      const open = toggle.getAttribute('aria-expanded') !== 'true';
      toggle.setAttribute('aria-expanded', String(open));
      menu?.classList.toggle('is-open', open);
    });

    document.addEventListener('click', (e) => {
      if (!header.contains(e.target as Node)) closeDropdowns();
    });
    document.addEventListener('keydown', (e) => {
      if (e.key !== 'Escape') return;
      const openBtn = dropdownToggles.find((b) => b.getAttribute('aria-expanded') === 'true');
      closeDropdowns();
      openBtn?.focus();
      if (toggle?.getAttribute('aria-expanded') === 'true') {
        toggle.setAttribute('aria-expanded', 'false');
        menu?.classList.remove('is-open');
        toggle.focus();
      }
    });

    const themeBtn = header.querySelector<HTMLButtonElement>('[data-theme-toggle]');
    if (themeBtn) {
      const root = document.documentElement;
      const current = () => (root.dataset.theme === 'light' ? 'light' : 'dark');
      const label = () => themeBtn.setAttribute('aria-label', current() === 'light' ? 'Switch to dark theme' : 'Switch to light theme');
      label();
      themeBtn.addEventListener('click', () => {
        const next = current() === 'light' ? 'dark' : 'light';
        root.dataset.theme = next;
        try { window.localStorage.setItem('ack-theme', next); } catch { /* ignore */ }
        label();
        document.dispatchEvent(new CustomEvent('ack:theme', { detail: { theme: next } }));
      });
    }

    const cartBtn = header.querySelector<HTMLButtonElement>('[data-cart-open]');
    const countEl = header.querySelector<HTMLElement>('[data-cart-count]');
    if (cartBtn && countEl) {
      const cart = createCart(cartBtn.dataset.cartKey);
      const label = cartBtn.dataset.cartLabel || 'Cart';
      const render = () => {
        const n = cart.count();
        countEl.textContent = n > 99 ? '99+' : String(n);
        countEl.hidden = n === 0;
        cartBtn.setAttribute('aria-label', n ? `${label} (${n})` : label);
      };
      render();
      cart.subscribe((_items) => {
        render();
        countEl.classList.remove('is-bump');
        void countEl.offsetWidth;
        countEl.classList.add('is-bump');
      });
      cartBtn.addEventListener('click', () => {
        document.dispatchEvent(new CustomEvent('ack:cart-open', { detail: { key: cart.key, trigger: cartBtn } }));
      });
    }
  });
</script>

<style>
  .store-header {
    container-type: inline-size;
    --sh-h: 68px;
    position: relative;
    z-index: 50;
    width: 100%;
    color: var(--c-text-1, #fff);
    border-bottom: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05));
  }
  .store-header--sm { --sh-h: 56px; }
  .store-header--lg { --sh-h: 80px; }
  .store-header--sticky { position: sticky; top: 0; }
  .store-header--glass { background: rgb(var(--paper-rgb, 5 5 5) / 0.72); backdrop-filter: blur(18px) saturate(1.4); }
  .store-header--solid { background: var(--c-bg-1, #0a0a0a); }
  .store-header--transparent { background: transparent; border-bottom-color: transparent; }

  .store-header__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-6, 1.5rem);
    max-width: 1280px;
    height: var(--sh-h);
    margin: 0 auto;
    padding: 0 var(--sp-6, 1.5rem);
  }

  .store-header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2, 0.5rem);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    color: var(--c-text-1, #fff);
    text-decoration: none;
    white-space: nowrap;
  }
  .store-header__logo {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--c-primary, #b8860b), var(--c-primary-light, #d4a017));
    color: var(--c-on-primary, #050505);
  }

  .store-header__nav { flex: 1; }
  .store-header__links { display: flex; align-items: center; gap: var(--sp-1, 0.25rem); margin: 0; padding: 0; list-style: none; }
  .store-header__item { position: relative; }
  .store-header__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 40px;
    padding: 0 var(--sp-3, 0.75rem);
    border: 0;
    border-radius: var(--r-full, 9999px);
    background: transparent;
    color: var(--c-text-2, #a3a3a3);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
  }
  .store-header__link:hover,
  .store-header__link[aria-expanded='true'],
  .store-header__link[aria-current='page'] { color: var(--c-text-1, #fff); background: rgb(var(--ink-rgb, 255 255 255) / 0.05); }
  .store-header__link svg { transition: transform 0.2s ease; }
  .store-header__link[aria-expanded='true'] svg { transform: rotate(180deg); }

  .store-header__dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 280px;
    padding: var(--sp-2, 0.5rem);
    border-radius: var(--r-md, 12px);
    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
    background: rgb(var(--paper-rgb, 5 5 5) / 0.96);
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
    animation: sh-pop 0.18s ease-out;
  }
  .store-header__dropdown ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
  .store-header__dropdown a {
    display: grid;
    gap: 2px;
    padding: var(--sp-2, 0.5rem) var(--sp-3, 0.75rem);
    border-radius: var(--r-sm, 8px);
    color: var(--c-text-1, #fff);
    text-decoration: none;
    font-size: 0.9rem;
  }
  .store-header__dropdown a span { font-size: 0.78rem; color: var(--c-text-2, #a3a3a3); }
  .store-header__dropdown a:hover { background: rgb(var(--ink-rgb, 255 255 255) / 0.05); }
  .store-header__dropdown-all { border-top: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05)); margin-top: 4px; padding-top: 4px; }
  .store-header__dropdown-all a { color: var(--c-primary-light, #d4a017); font-weight: 600; }
  @keyframes sh-pop { from { opacity: 0; transform: translateY(-4px); } }

  .store-header__actions { display: flex; align-items: center; gap: var(--sp-2, 0.5rem); margin-left: auto; }
  .store-header__search {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 0.5rem);
    height: 40px;
    padding: 0 var(--sp-3, 0.75rem);
    border-radius: var(--r-full, 9999px);
    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
    background: rgb(var(--ink-rgb, 255 255 255) / 0.03);
    color: var(--c-text-2, #a3a3a3);
    transition: border-color 0.2s ease;
  }
  .store-header__search:focus-within { border-color: var(--c-primary-light, #d4a017); }
  .store-header__search input {
    width: 170px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--c-text-1, #fff);
    font: inherit;
    font-size: 0.875rem;
  }
  .store-header__search input::placeholder { color: var(--c-text-2, #a3a3a3); }

  .store-header__icon,
  .store-header__toggle {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--r-full, 9999px);
    background: transparent;
    color: var(--c-text-1, #fff);
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .store-header__icon:hover,
  .store-header__toggle:hover { background: rgb(var(--ink-rgb, 255 255 255) / 0.06); color: var(--c-text-1, #fff); }
  .store-header__toggle { display: none; }
  .store-header__theme .i-moon { display: none; }
  :global([data-theme='light']) .store-header__theme .i-sun { display: none; }
  :global([data-theme='light']) .store-header__theme .i-moon { display: block; }
  .store-header :is(a, button, input):focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; }

  .store-header__count {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--r-full, 9999px);
    background: var(--c-primary-light, #d4a017);
    color: var(--c-on-primary, #050505);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
  }
  .store-header__count[hidden] { display: none; }
  .store-header__count.is-bump { animation: sh-bump 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
  @keyframes sh-bump { 40% { transform: scale(1.35); } }

  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  @container (max-width: 960px) {
    .store-header__inner { gap: var(--sp-2, 0.5rem); padding: 0 var(--sp-3, 0.75rem); }
    .store-header__toggle { display: grid; }
    .store-header__search { display: none; }
    .store-header__nav {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      display: none;
      padding: var(--sp-3, 0.75rem);
      background: var(--c-bg-1, #0a0a0a);
      box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9);
      border-bottom: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05));
      max-height: calc(100dvh - var(--sh-h));
      overflow-y: auto;
    }
    .store-header__nav.is-open { display: block; }
    .store-header__links { flex-direction: column; align-items: stretch; }
    .store-header__link { width: 100%; justify-content: space-between; min-height: 48px; border-radius: var(--r-sm, 8px); }
    .store-header__dropdown { position: static; min-width: 0; box-shadow: none; background: rgb(var(--ink-rgb, 255 255 255) / 0.02); margin: 4px 0; }
    .store-header__toggle[aria-expanded='true'] .l1 { transform: translateY(5px) rotate(45deg); transform-origin: center; }
    .store-header__toggle[aria-expanded='true'] .l2 { opacity: 0; }
    .store-header__toggle[aria-expanded='true'] .l3 { transform: translateY(-5px) rotate(-45deg); transform-origin: center; }
    .store-header__toggle path { transition: transform 0.2s ease, opacity 0.2s ease; transform-box: fill-box; }
  }

  @media (prefers-reduced-motion: reduce) {
    .store-header__dropdown, .store-header__count.is-bump { animation: none; }
  }
</style>