---
import { Image } from 'astro:assets';
import type { Lang, PageKey } from '../i18n/routes';
import { pathFor } from '../i18n/routes';
import { getDict } from '../i18n';
import { SITE } from '../config';
import logo from '../assets/logo.png';

interface Props { lang: Lang; pageKey: PageKey }
const { lang, pageKey } = Astro.props;
const t = getDict(lang);
const link = (key: PageKey) => ({ href: pathFor(lang, key), label: t.pages[key].nav, current: key === pageKey ? ('page' as const) : undefined });
const activities = (['catechismo', 'matrimonio', 'oratorio', 'grest'] as const).map(link);
const groups = (['scout', 'coro'] as const).map(link);
const giornalino = link('giornalino'); const contatti = link('contatti');
---
<header class="site-header">
  <div class="wrap bar">
    <a class="brand" href={pathFor(lang, 'home')}>
      <Image src={logo} alt="" width={44} height={44} layout="fixed" loading="eager" />
      <span class="brand-name"><span>{t.site.nameLine1}</span><strong>{t.site.nameLine2}</strong></span>
    </a>
    <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="nav" aria-label={t.nav.menu}>
      <span class="bar1"></span><span class="bar2"></span>
    </button>
    <nav id="nav" class="nav" aria-label={t.nav.main}>
      <ul>
        <li><a href={SITE.instagram} target="_blank" rel="noopener">{t.pages.news.nav}</a></li>
        <li>
          <details class="menu">
            <summary>{t.nav.activities}</summary>
            <ul>{activities.map((a) => <li><a href={a.href} aria-current={a.current}>{a.label}</a></li>)}</ul>
          </details>
        </li>
        <li>
          <details class="menu">
            <summary>{t.nav.groups}</summary>
            <ul>{groups.map((a) => <li><a href={a.href} aria-current={a.current}>{a.label}</a></li>)}</ul>
          </details>
        </li>
        <li><a href={giornalino.href} aria-current={giornalino.current}>{giornalino.label}</a></li>
        <li><a class="nav-cta" href={contatti.href} aria-current={contatti.current}>{contatti.label}</a></li>
      </ul>
    </nav>
  </div>
</header>

<style>
  .site-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
  .brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
  .brand img { mix-blend-mode: multiply; }
  .brand-name { display: flex; flex-direction: column; line-height: 1.15; }
  .brand-name span { font-size: .8rem; color: var(--muted); }
  .brand-name strong { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }

  .nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
  .nav a, .nav summary {
    display: block; padding: 8px 12px; border-radius: 6px;
    color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; cursor: pointer;
  }
  .nav a:hover, .nav summary:hover { background: var(--paper-2); }
  .nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ochre); border-radius: 0; }
  .nav .nav-cta { margin-left: 8px; }
  .menu { position: relative; }
  .menu summary { list-style: none; display: flex; align-items: center; gap: 6px; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu summary::after { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
  .menu ul {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 8px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 12px 32px rgba(27,36,48,.18);
  }
  .menu ul a { padding: 10px 12px; }

  .nav-toggle {
    display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
    position: relative; border-radius: 6px;
  }
  .nav-toggle span { position: absolute; left: 11px; width: 22px; height: 2px; background: var(--ink); transition: transform .25s var(--ease), top .25s var(--ease); }
  .nav-toggle .bar1 { top: 17px; } .nav-toggle .bar2 { top: 25px; }
  [data-open] .nav-toggle .bar1 { top: 21px; transform: rotate(45deg); }
  [data-open] .nav-toggle .bar2 { top: 21px; transform: rotate(-45deg); }

  @media (max-width: 899px) {
    .nav-toggle { display: block; }
    .nav { display: none; position: fixed; inset: 72px 0 0; background: var(--paper); overflow: auto; padding: 16px var(--gutter) 40px; }
    [data-open] .nav { display: block; }
    .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
    .nav > ul > li { border-bottom: 1px solid var(--line); }
    .nav a, .nav summary { padding: 16px 4px; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; }
    .menu summary { color: var(--muted); font-size: .9rem; font-weight: 500; pointer-events: none; }
    .menu summary::after { display: none; }
    .menu ul { position: static; min-width: 0; padding: 0 0 8px; background: transparent; border: 0; box-shadow: none; }
    .menu ul a { padding: 12px 4px 12px 16px; }
    .nav .nav-cta { margin: 20px 0 0; justify-content: center; text-decoration: none; background: var(--ochre); color: var(--ink); border-radius: 6px; }
  }
</style>

<script>
  const header = document.querySelector<HTMLElement>('.site-header')!;
  const btn = header.querySelector<HTMLButtonElement>('.nav-toggle')!;
  const menus = [...header.querySelectorAll<HTMLDetailsElement>('details.menu')];
  const mobile = matchMedia('(max-width: 899px)');

  const setOpen = (open: boolean) => {
    header.toggleAttribute('data-open', open);
    btn.setAttribute('aria-expanded', String(open));
    document.body.classList.toggle('no-scroll', open);
    // contenuto dietro l'overlay non raggiungibile da tastiera/screen reader
    document.querySelectorAll('main, footer').forEach((el) => el.toggleAttribute('inert', open));
  };
  btn.addEventListener('click', () => setOpen(!header.hasAttribute('data-open')));

  // su mobile i gruppi sono sempre aperti; su desktop sono tendine esclusive
  const sync = () => {
    menus.forEach((m) => (m.open = mobile.matches));
    // resize oltre 900px: evita che inert/no-scroll restino attivi dopo il passaggio a desktop
    if (!mobile.matches && header.hasAttribute('data-open')) setOpen(false);
  };
  sync();
  mobile.addEventListener('change', sync);
  menus.forEach((m) => m.addEventListener('toggle', () => {
    if (!mobile.matches && m.open) menus.forEach((o) => { if (o !== m) o.open = false; });
  }));
  document.addEventListener('click', (e) => {
    if (!mobile.matches) menus.forEach((m) => { if (!m.contains(e.target as Node)) m.open = false; });
  });
  document.addEventListener('keydown', (e) => {
    if (e.key !== 'Escape') return;
    if (mobile.matches) { if (header.hasAttribute('data-open')) { setOpen(false); btn.focus(); } }
    else menus.forEach((m) => (m.open = false));
  });
</script>