---
const nav = [
  { href: "/ueber-uns",      label: "Über uns" },
  { href: "/was-wir-tun",    label: "Was wir tun" },
  { href: "/projekte",       label: "Projekte" },
  { href: "/aktuelles",      label: "Aktuelles" },
  { href: "/unterstuetzen",  label: "Unterstützen" },
];
const pathname = Astro.url.pathname;
const isActive = (href: string) => pathname === href || pathname.startsWith(href + "/");
---

<header class="sticky top-0 z-50">
  <div class="rainbow-bar"></div>

  <div class="bg-[var(--color-paper)]/85 backdrop-blur-md border-b border-[var(--color-border)]">
    <div class="max-w-6xl mx-auto px-4 flex items-center justify-between gap-4 py-3">
      <!-- Logo: Bildmarke + Apex-Brush-Wortmarke (responsiv) -->
      <a href="/" class="group shrink-0 flex items-center gap-2.5" aria-label="Kitafreunde Regenbogen — Startseite">
        <img
          src="/logo/bildmarke.svg" alt=""
          class="h-12 lg:h-14 w-auto transition-transform duration-200 group-hover:-rotate-3 group-hover:scale-105"
          width="159" height="177"
        />
        <!-- Wortmarke: mobil aus · sm–xl zweizeilig · xl+ einzeilig -->
        <span class="hidden sm:flex font-brand text-[var(--color-primary)] leading-[0.9] flex-col xl:flex-row xl:items-baseline xl:gap-2 text-[26px] xl:text-[30px]">
          <span>Kitafreunde</span>
          <span class="rainbow-text">Regenbogen</span>
        </span>
      </a>

      <!-- Desktop Nav (ab lg, damit die zweizeilige Wortmarke Platz hat) -->
      <nav class="hidden lg:flex items-center gap-6 text-[15px] font-semibold">
        {nav.map(({ href, label }) => (
          <a
            href={href}
            class:list={[
              "relative py-1 transition-colors hover:text-[var(--color-primary)]",
              isActive(href) ? "text-[var(--color-primary)]" : "text-[var(--color-text-muted)]",
            ]}
          >
            {label}
            {isActive(href) && (
              <span class="absolute -bottom-0.5 left-0 right-0 h-[3px] rounded-full bg-[var(--color-accent)]"></span>
            )}
          </a>
        ))}
      </nav>

      <a href="/mitglied-werden" class="btn-primary text-sm hidden lg:inline-flex">
        <span aria-hidden="true">♥</span> Mitglied werden
      </a>

      <!-- Mobile/Tablet Button -->
      <button
        id="mobile-menu-btn"
        class="lg:hidden p-2 rounded-xl text-[var(--color-primary)] hover:bg-[var(--color-surface-alt)]"
        aria-label="Menü öffnen" aria-expanded="false"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M4 7h16M4 12h16M4 17h16"/>
        </svg>
      </button>
    </div>

    <!-- Mobile/Tablet Nav -->
    <div id="mobile-menu" class="hidden lg:hidden border-t border-[var(--color-border)] bg-[var(--color-paper)]">
      <div class="px-4 py-5 flex flex-col gap-1 text-base font-semibold">
        {nav.map(({ href, label }) => (
          <a href={href}
            class:list={[
              "py-2.5 px-3 rounded-xl transition-colors",
              isActive(href) ? "text-[var(--color-primary)] bg-[var(--color-surface-alt)]" : "text-[var(--color-text)] hover:bg-[var(--color-surface-alt)]",
            ]}>{label}</a>
        ))}
        <a href="/mitglied-werden" class="btn-primary mt-3"><span aria-hidden="true">♥</span> Mitglied werden</a>
      </div>
    </div>
  </div>
</header>

<script>
  const btn = document.getElementById("mobile-menu-btn");
  const menu = document.getElementById("mobile-menu");
  btn?.addEventListener("click", () => {
    const open = menu?.classList.toggle("hidden");
    btn.setAttribute("aria-expanded", String(open === false));
  });
</script>
