---
// src/components/Navigation.astro
import ThemeToggle from './ThemeToggle.astro';

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

<nav>
  <div class="container">
    <div class="nav-wrapper">
      <a href="/" class="nav-brand">
        <img src="/logo-dark.png" alt="ForensicPathways" class="nav-logo nav-logo-light" />
        <img src="/logo-white.png" alt="ForensicPathways" class="nav-logo nav-logo-dark" />
        <span style="font-weight: 600; font-size: 1.125rem;">ForensicPathways</span>
      </a>
      
      <ul class="nav-links">
        <li>
          <a href="/" class={`nav-link ${currentPath === '/' ? 'active' : ''}`}>
            Start
          </a>
        </li>
        <li>
          <a href="/knowledgebase" class={`nav-link ${currentPath === '/knowledgebase' ? 'active' : ''}`}>
            Knowledgebase
          </a>
        </li>
        <li>
          <a href="/contribute" class={`nav-link ${currentPath.startsWith('/contribute') ? 'active' : ''}`}>
            Beitragen
          </a>
        </li>
        <li>
          <a href="/status" class={`nav-link ${currentPath === '/status' ? 'active' : ''}`}>
            Status
          </a>
        </li>
        <li>
          <a href="/about" class={`nav-link ${currentPath === '/about' ? 'active' : ''}`}>
            Über das Projekt
          </a>
        </li>
        <li>
          <ThemeToggle />
        </li>
      </ul>
    </div>
  </div>
</nav>