<script lang="ts">
  /** @type {{ href: string; label: string; active?: boolean }[]} */
  let {
    links = [],
    ctaHref = '/mitmachen',
    ctaLabel = 'Mitmachen',
    logoSrc = '/logo.svg',
    logoAlt = 'Windwiderstand',
    mobileMenuOpen = $bindable(false),
  } = $props();

  function toggleMobileMenu() {
    mobileMenuOpen = !mobileMenuOpen;
  }
</script>

<a href="#main" class="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[51] focus:rounded focus:bg-wald-500 focus:px-2 focus:py-1 focus:text-white focus:outline-none">
  Zum Inhalt springen
</a>
<header
  class="sticky top-0 z-50 border-b border-stein-200 bg-stein-0/95 shadow-sm backdrop-blur-sm lg:shadow-none"
>
  <nav
    aria-label="Hauptnavigation"
    class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 lg:h-[72px] lg:px-8"
  >
    <a href="/" class="flex items-center gap-2">
      <img src={logoSrc} alt={logoAlt} class="h-8" />
    </a>

    <div class="hidden items-center gap-8 lg:flex">
      {#each links as link}
        {#if link.active}
          <a
            href={link.href}
            class="border-b-2 border-wald-500 text-wald-500 text-[0.9375rem] font-medium"
            aria-current="page"
          >
            {link.label}
          </a>
        {:else}
          <a
            href={link.href}
            class="text-stein-700 text-[0.9375rem] font-medium hover:text-wald-600"
          >
            {link.label}
          </a>
        {/if}
      {/each}
    </div>

    <a
      href={ctaHref}
      class="hidden rounded-lg bg-wald-500 px-5 py-2.5 text-sm font-semibold text-white hover:bg-wald-600 lg:inline-block"
    >
      {ctaLabel}
    </a>

    <button
      type="button"
      class="lg:hidden"
      aria-expanded={mobileMenuOpen}
      aria-controls="mobile-menu"
      onclick={toggleMobileMenu}
    >
      <span class="sr-only">Menu öffnen</span>
      {#if mobileMenuOpen}
        <span class="text-2xl" aria-hidden="true">✕</span>
      {:else}
        <span class="text-2xl" aria-hidden="true">☰</span>
      {/if}
    </button>
  </nav>

  {#if mobileMenuOpen}
    <div
      id="mobile-menu"
      class="absolute left-0 right-0 top-16 z-50 flex flex-col gap-4 border-b border-stein-200 bg-stein-0 p-4 lg:hidden"
      role="dialog"
      aria-label="Mobile Menü"
    >
      {#each links as link}
        <a
          href={link.href}
          class="text-stein-700 text-[0.9375rem] font-medium hover:text-wald-600 {link.active
            ? 'border-b-2 border-wald-500 text-wald-500'
            : ''}"
          aria-current={link.active ? 'page' : undefined}
        >
          {link.label}
        </a>
      {/each}
      <a
        href={ctaHref}
        class="rounded-lg bg-wald-500 px-5 py-2.5 text-center text-sm font-semibold text-white hover:bg-wald-600"
      >
        {ctaLabel}
      </a>
    </div>
  {/if}
</header>
