---
interface Props {
  lang: 'es' | 'en';
}

const { lang } = Astro.props;
const currentPath = Astro.url.pathname;
---

<header class="flex items-center justify-between px-10 py-5 border-b border-line">
  <a href="/" class="flex items-center gap-3 no-underline">
    <img src="/ornito_logo.png" alt="Ornitonautas" class="w-[42px] h-[42px] object-contain" />
    <div>
      <div class="font-heading font-bold text-[19px] tracking-tight text-navy">Ornitonautas</div>
      <div class="text-[11px] text-text-muted tracking-wide">Aprende. Practica. Despega.</div>
    </div>
  </a>

  <nav class="hidden md:flex items-center gap-8 text-[14.5px] font-semibold">
    <a href="/campus/" class={`transition-colors hover:text-orange ${currentPath.includes('/campus') ? 'text-orange' : 'text-text'}`}>FP España</a>
    <a href="/aprendizaje/" class={`transition-colors hover:text-orange ${currentPath.includes('/aprendizaje') ? 'text-orange' : 'text-text'}`}>Rutas</a>
    <a href="/comunidad/" class={`transition-colors hover:text-orange ${currentPath.includes('/comunidad') ? 'text-orange' : 'text-text'}`}>Recursos</a>
  </nav>

  <div class="flex items-center gap-3.5">
    <a href="/contacto/" class="hidden sm:inline text-sm font-semibold text-text hover:text-orange transition-colors">Iniciar sesión</a>
    <a href="/campus/" class="bg-orange text-white font-bold text-sm py-[11px] px-5 rounded-[10px] hover:bg-orange-ink transition-colors">
      Explorar FP
    </a>
  </div>

  <button
    type="button"
    class="md:hidden p-2 text-text hover:text-orange"
    aria-label="Abrir menú"
    id="mobile-menu-button"
  >
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
    </svg>
  </button>
</header>

<div class="md:hidden hidden px-10 py-4 border-b border-line" id="mobile-menu">
  <nav class="flex flex-col gap-2 text-sm font-semibold">
    <a href="/campus/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">FP España</a>
    <a href="/aprendizaje/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">Rutas</a>
    <a href="/comunidad/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">Recursos</a>
    <a href="/contacto/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">Iniciar sesión</a>
  </nav>
</div>

<script>
  const button = document.getElementById('mobile-menu-button');
  const menu = document.getElementById('mobile-menu');
  button?.addEventListener('click', () => menu?.classList.toggle('hidden'));
</script>