---
// src/components/Header.astro
import Logo from "./Logo.astro";
import { getPath } from "../utils/paths";

const pathname = new URL(Astro.request.url).pathname;
const currentPath = pathname.slice(1);
---

<header class="main-header">
    <div class="header-container">
        <a href={getPath("/")} class="group flex items-center gap-2">
            <Logo class="h-6 w-auto transition-colors" />
        </a>
        <!-- 
    <nav>
      <ul class="nav-list">
        <li>
          <a href="/projekte" class={`nav-item ${currentPath === 'projekte' ? 'nav-item-active' : ''}`}>
            Projekte
          </a>
        </li>
        <li>
          <a href="/engineering" class={`nav-item ${currentPath === 'engineering' ? 'nav-item-active' : ''}`}>
            Engineering
          </a>
        </li>
        <li>
          <a href="/kontakt" class={`nav-item ${currentPath === 'kontakt' ? 'nav-item-active' : ''}`}>
            Kontakt
          </a>
        </li>
      </ul>
    </nav> -->
    </div>
</header>

<style>
    @reference "../styles/global.css";
    .main-header {
        @apply sticky top-0 z-50 w-full bg-linear-to-b from-white/80 to-header-bg/80 backdrop-blur-md shadow-md;
    }

    /* Innere Zentrierung */
    .header-container {
        @apply container mx-auto flex h-16 items-center justify-between px-6;
    }

    /* Navigations-Links */
    .nav-list {
        @apply flex items-center gap-8;
    }

    .nav-item {
        @apply text-sm font-medium text-nav-text transition-colors hover:text-nav-hover;
    }
</style>