---
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: jetzt mit Präsenz -->
      <a href="/" class="shrink-0 transition-transform duration-200 hover:-rotate-2 hover:scale-[1.03]" aria-label="Kitafreunde Regenbogen — Startseite">
        <img src="/logo/logo.png" alt="Kitafreunde Regenbogen" class="h-14 sm:h-16 w-auto" width="744" height="745" />
      </a>

      <!-- Desktop Nav -->
      <nav class="hidden md:flex items-center gap-7 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 md:inline-flex">
        <span aria-hidden="true">♥</span> Mitglied werden
      </a>

      <!-- Mobile Button -->
      <button
        id="mobile-menu-btn"
        class="md: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 Nav -->
    <div id="mobile-menu" class="hidden md: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>