---
import navigations from '../data/navigations.json';
import MobileMenu from './MobileMenu';

const currentPath = Astro.url.pathname;
---

<header class="sticky top-0 w-full z-50 bg-background/70 backdrop-blur-sm">
  <div class="container flex h-20 items-center">
    <a href="/" class="relative overflow-hidden rounded z-50 shrink-0" aria-label="Home">
      <img src="/logo.webp" alt="IMPHNEN" class="w-24 md:w-28 h-auto" />
    </a>

    <nav class="hidden md:flex items-center gap-8 flex-1 justify-center">
      {navigations.map(({ link, title }: { link: string; title: string }) => (
        <a
          href={link}
          class:list={[
            'text-sm font-medium relative group px-1 py-2',
            currentPath === link ? 'text-primary' : 'text-foreground/90',
          ]}
        >
          <span class="transition-colors hover:text-primary block">{title}</span>
          {currentPath === link && (
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-primary-500" />
          )}
        </a>
      ))}
    </nav>

    <!-- Spacer to balance the logo on the left -->
    <div class="hidden md:block w-24 md:w-28 shrink-0"></div>

    <div class="md:hidden ml-auto">
      <MobileMenu client:idle navigations={navigations} currentPath={currentPath} />
    </div>
  </div>
</header>
