---
import { Image } from 'astro:assets';
import logo from '../assets/logo-white.png';
import { SITE, CONTACT, NAV } from '../data/site';
---

<header
  id="site-header"
  class="fixed inset-x-0 top-0 z-50 transition-[background-color,backdrop-filter,border-color] duration-300 border-b border-transparent data-[scrolled]:border-white/10 data-[scrolled]:bg-ink-950/80 data-[scrolled]:backdrop-blur-xl"
>
  <div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-5 sm:h-20 sm:px-8">
    <a href="#start" class="group flex items-center gap-3" aria-label={`${SITE.name} Startseite`}>
      <Image
        src={logo}
        alt=""
        width={44}
        height={44}
        loading="eager"
        class="h-9 w-9 transition-transform duration-300 group-hover:scale-110 sm:h-11 sm:w-11"
      />
      <span class="font-display text-lg tracking-tight text-white sm:text-xl">DJ NIZZ</span>
    </a>

    <nav class="hidden items-center gap-8 md:flex" aria-label="Hauptnavigation">
      {
        NAV.map((item) => (
          <a
            href={item.href}
            class="relative text-sm font-medium text-white/70 transition-colors hover:text-white after:absolute after:-bottom-1.5 after:left-0 after:h-px after:w-0 after:bg-gold-400 after:transition-all after:duration-300 hover:after:w-full"
          >
            {item.label}
          </a>
        ))
      }
      <a
        href={`mailto:${CONTACT.email}?subject=Booking-Anfrage`}
        class="rounded-full bg-gold-400 px-5 py-2.5 text-sm font-semibold text-ink-950 transition hover:bg-gold-300 hover:shadow-[0_0_24px_-4px] hover:shadow-gold-400/60"
      >
        Booking
      </a>
    </nav>

    <button
      id="menu-toggle"
      type="button"
      class="relative z-50 grid h-11 w-11 place-items-center rounded-lg text-white md:hidden"
      aria-label="Menü öffnen"
      aria-expanded="false"
      aria-controls="mobile-menu"
    >
      <span class="sr-only">Menü</span>
      <svg viewBox="0 0 24 24" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
        <path class="origin-center transition-transform duration-300" id="bar-top" d="M4 7h16" />
        <path class="transition-opacity duration-200" id="bar-mid" d="M4 12h16" />
        <path class="origin-center transition-transform duration-300" id="bar-bot" d="M4 17h16" />
      </svg>
    </button>
  </div>

  <div
    id="mobile-menu"
    class="invisible fixed inset-0 -z-10 flex flex-col items-center justify-center gap-8 bg-ink-950/97 opacity-0 backdrop-blur-xl transition-opacity duration-300 data-[open]:visible data-[open]:opacity-100 md:hidden"
  >
    {
      NAV.map((item) => (
        <a href={item.href} data-menu-link class="font-display text-3xl text-white/90 transition-colors hover:text-gold-400">
          {item.label}
        </a>
      ))
    }
    <a
      href={`mailto:${CONTACT.email}?subject=Booking-Anfrage`}
      data-menu-link
      class="mt-2 rounded-full bg-gold-400 px-8 py-3.5 font-display text-lg text-ink-950"
    >
      Booking
    </a>
  </div>
</header>

<script>
  const header = document.getElementById('site-header')!;
  const toggle = document.getElementById('menu-toggle')!;
  const menu = document.getElementById('mobile-menu')!;
  const barTop = document.getElementById('bar-top')!;
  const barMid = document.getElementById('bar-mid')!;
  const barBot = document.getElementById('bar-bot')!;

  // Header wird ab dem ersten Scrollen undurchsichtig
  const onScroll = () => {
    if (window.scrollY > 24) header.setAttribute('data-scrolled', '');
    else header.removeAttribute('data-scrolled');
  };
  onScroll();
  window.addEventListener('scroll', onScroll, { passive: true });

  const setMenu = (open: boolean) => {
    menu.toggleAttribute('data-open', open);
    toggle.setAttribute('aria-expanded', String(open));
    toggle.setAttribute('aria-label', open ? 'Menü schließen' : 'Menü öffnen');
    document.body.style.overflow = open ? 'hidden' : '';
    barTop.style.transform = open ? 'translateY(5px) rotate(45deg)' : '';
    barBot.style.transform = open ? 'translateY(-5px) rotate(-45deg)' : '';
    barMid.style.opacity = open ? '0' : '';
  };

  toggle.addEventListener('click', () => setMenu(!menu.hasAttribute('data-open')));
  menu.querySelectorAll('[data-menu-link]').forEach((link) => link.addEventListener('click', () => setMenu(false)));
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && menu.hasAttribute('data-open')) setMenu(false);
  });
</script>
