---
const navItems = [
  { href: '#warum', label: 'Warum' },
  { href: '#leistungen', label: 'Leistungen' },
  { href: '#arbeiten', label: 'Arbeiten' },
  { href: '#ablauf', label: 'Ablauf' },
  { href: '#preis', label: 'Preis' },
];
---

<header class="nav">
  <div class="container nav-inner">
    <a href="/" class="nav-logo">
      <img src="/logo.jpg" alt="larpaso Webdesign" width="320" height="60" class="nav-logo-img" />
    </a>

    <input type="checkbox" id="nav-toggle" class="nav-toggle-checkbox" />
    <label for="nav-toggle" class="nav-toggle" aria-label="Menü öffnen/schließen">
      <span></span>
      <span></span>
      <span></span>
    </label>

    <nav class="nav-links" aria-label="Hauptnavigation">
      <ul>
        {navItems.map((item) => (
          <li>
            <a href={item.href}>{item.label}</a>
          </li>
        ))}
      </ul>
      <a class="btn btn-primary nav-cta" href="#kontakt">Projekt anfragen</a>
    </nav>
  </div>
</header>

<style>
  .nav {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 50;
  }

  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-4);
  }

  .nav-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .nav-logo:hover {
    text-decoration: none;
  }

  .nav-logo-img {
    height: 3.5rem;
    width: auto;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }

  .nav-links ul {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    list-style: none;
  }

  .nav-links a {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
  }

  .nav-links ul a:hover {
    color: var(--color-primary);
    text-decoration: none;
  }

  .nav-cta {
    font-size: var(--font-size-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: var(--space-3) var(--space-5);
  }

  .nav-toggle-checkbox {
    display: none;
  }

  .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 28px;
    height: 22px;
    cursor: pointer;
  }

  .nav-toggle span {
    display: block;
    height: 2px;
    background: var(--color-text);
    border-radius: 1px;
  }

  @media (max-width: 900px) {
    .nav-toggle {
      display: flex;
    }

    .nav-links {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--color-bg);
      border-bottom: 1px solid var(--color-border);
      box-shadow: var(--shadow-md);
    }

    .nav-links {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-4);
      padding: var(--space-4) var(--container-padding) var(--space-5);
    }

    .nav-links ul {
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      width: 100%;
    }

    .nav-links li {
      width: 100%;
      padding-block: var(--space-3);
      border-bottom: 1px solid var(--color-border);
    }

    .nav-toggle-checkbox:checked ~ .nav-links {
      display: flex;
    }
  }
</style>