---
import en from '../data/navigation.en.json';
import es from '../data/navigation.es.json';
const { lang = 'en' } = Astro.props;
const nav = { en, es, ar: en }[lang as 'en' | 'es' | 'ar'] || en;
const aboutLinks = lang === 'es'
  ? [['Equipo', '/team'], ['Carreras', '/careers'], ['Preguntas frecuentes', '/faqs']]
  : [['Team', '/team'], ['Careers', '/careers'], ['FAQ', '/faqs']];
---
<nav class="main-nav" aria-label="Main navigation">
  <ul>
    {nav.primary.map((item) => (
      <li class:list={{ 'has-submenu': item.href.endsWith('/about') || item.href.endsWith('/services') }}>
        <a href={item.href}>{item.label}</a>
        {item.href.endsWith('/about') && <ul class="submenu">
          {aboutLinks.map(([label, href]) => <li><a href={href}>{label}</a></li>)}
        </ul>}
        {item.href.endsWith('/services') && <ul class="submenu">
          {nav.services.map((service) => <li><a href={service.href}>{service.label}</a></li>)}
        </ul>}
      </li>
    ))}
  </ul>
</nav>

<style>
  .main-nav { margin-inline: auto; }
  .main-nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
  .main-nav li { position: relative; }
  .main-nav a { color: var(--color-primary); font-size: .9rem; text-decoration: none; }
  .main-nav a:hover { color: var(--color-accent-strong); }
  .main-nav .submenu { background: white; box-shadow: var(--shadow-md); display: none; gap: 0; left: -1rem; min-width: 180px; padding: .75rem 0; position: absolute; top: 100%; }
  .main-nav .submenu a { display: block; padding: .45rem 1rem; }
  .main-nav li:hover > .submenu, .main-nav li:focus-within > .submenu { display: block; }
  @media (max-width: 950px) {
    .main-nav { display: none; }
    :global(.mobile-nav) .main-nav { display: block; }
    :global(.mobile-nav) .main-nav ul { align-items: flex-start; flex-direction: column; padding: var(--space-md); }
  }
</style>