---
import { Image } from 'astro:assets';
import type { Lang, PageKey } from '../i18n/routes';
import { pathFor } from '../i18n/routes';
import { getDict } from '../i18n';
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' : undefined });
const activities = (['catechismo', 'matrimonio', 'oratorio', 'grest'] as const).map(link);
const groups = (['scout', 'coro'] as const).map(link);
const news = link('news'); const giornalino = link('giornalino'); const contatti = link('contatti');
---
<header class="site-header">
  <div class="wrap bar">
    <a class="brand" href={pathFor(lang, 'home')} aria-label={t.site.name}>
      <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={news.href} aria-current={news.current}>{news.label}</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="btn btn--ghost 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: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    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.1; font-family: var(--font-display); }
  .brand-name span { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
  .brand-name strong { font-weight: 500; font-size: 1.05rem; }

  .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: 8px;
    color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; cursor: pointer;
  }
  .nav a:hover, .nav summary:hover { background: var(--bg-2); }
  .nav a[aria-current="page"] { color: var(--accent-2); }
  .nav .nav-cta { padding: 10px 18px; 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: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  }
  .menu ul a { padding: 10px 12px; }

  .nav-toggle {
    display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
    position: relative; border-radius: 8px;
  }
  .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(--bg); 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-family: var(--font-display); }
    .menu summary { color: var(--muted); font-size: .85rem; font-family: var(--font-body); text-transform: uppercase; letter-spacing: .12em; 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; text-align: center; box-shadow: none; background: var(--accent); color: #fff; }
  }
</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)');

  btn.addEventListener('click', () => {
    const open = header.toggleAttribute('data-open');
    btn.setAttribute('aria-expanded', String(open));
    document.body.classList.toggle('no-scroll', open);
  });

  // su mobile i gruppi sono sempre aperti; su desktop sono tendine esclusive
  const sync = () => menus.forEach((m) => (m.open = mobile.matches));
  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' && !mobile.matches) menus.forEach((m) => (m.open = false));
  });
</script>