---
import { getLangFromUrl, t } from '../i18n/utils';

const lang = getLangFromUrl(Astro.url);
const currentPath = Astro.url.pathname;

const navLinks = [
  { href: '/landing-1', label: 'Landing 1' },
  { href: '/landing-2', label: 'Landing 2' },
  { href: '/landing-3', label: 'Landing 3' },
];

function isActive(href: string): boolean {
  if (href === '/') return currentPath === '/';
  return currentPath.startsWith(href);
}
---

<header class="site-header">
  <div class="container-site header-inner">
    <!-- Logo -->
    <a href="/" class="header-logo" aria-label="Cachet Peintres Décorateurs — Accueil">
      <img
        src="/images/logo.png"
        alt="Cachet Peintres Décorateurs"
        width="160"
        height="60"
        loading="eager"
      />
    </a>

    <!-- Desktop nav -->
    <nav class="header-nav" aria-label="Navigation principale">
      <ul>
        {navLinks.map(link => (
          <li>
            <a
              href={link.href}
              class:list={['nav-link', { active: isActive(link.href) }]}
            >
              {link.label}
            </a>
          </li>
        ))}
      </ul>
    </nav>

    <!-- CTA -->
    <div class="header-cta">
      <a href="/soumission" class="btn-primary">
        {t(lang, 'cta.soumission.short')}
      </a>
    </div>

    <!-- Mobile menu button -->
    <button
      class="mobile-menu-btn"
      aria-label="Menu"
      aria-expanded="false"
      aria-controls="mobile-menu"
      id="mobile-menu-btn"
    >
      <span class="sr-only">Ouvrir le menu</span>
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="3" y1="6" x2="21" y2="6" />
        <line x1="3" y1="12" x2="21" y2="12" />
        <line x1="3" y1="18" x2="21" y2="18" />
      </svg>
    </button>
  </div>

  <!-- Mobile menu -->
  <div class="mobile-menu" id="mobile-menu" aria-hidden="true">
    <nav aria-label="Navigation mobile">
      <ul>
        {navLinks.map(link => (
          <li>
            <a
              href={link.href}
              class:list={['mobile-nav-link', { active: isActive(link.href) }]}
            >
              {link.label}
            </a>
          </li>
        ))}
        <li>
          <a href="/soumission" class="mobile-cta-btn">
            {t(lang, 'cta.soumission.short')}
          </a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<style>
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: #ffffff;
    border-bottom: 2px solid var(--color-brand-100);
    box-shadow: 0 1px 8px rgba(49, 71, 50, 0.08);
  }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 1rem;
  }

  .header-logo img {
    height: 48px;
    width: auto;
    display: block;
    object-fit: contain;
  }

  .header-nav ul {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-link {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--color-gray-dark);
    letter-spacing: 0.02em;
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
  }

  .nav-link:hover,
  .nav-link.active {
    color: var(--color-brand-600);
    border-bottom-color: var(--color-brand-600);
  }

  .mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: var(--color-brand-600);
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease;
  }

  .mobile-menu-btn:hover {
    background-color: var(--color-brand-50);
  }

  .mobile-menu {
    display: none;
    background-color: #ffffff;
    border-top: 1px solid var(--color-brand-100);
    padding: 1rem 0 1.5rem;
  }

  .mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .mobile-nav-link {
    display: block;
    padding: 0.875rem 1.5rem;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-gray-dark);
    border-left: 3px solid transparent;
    transition: color 0.2s ease, background-color 0.2s ease;
  }

  .mobile-nav-link:hover,
  .mobile-nav-link.active {
    color: var(--color-brand-600);
    background-color: var(--color-brand-50);
    border-left-color: var(--color-brand-600);
  }

  .mobile-cta-btn {
    display: block;
    margin: 1rem 1.5rem 0;
    padding: 0.875rem 1.5rem;
    background-color: var(--color-brand-600);
    color: #ffffff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    border-radius: 4px;
    transition: background-color 0.2s ease;
  }

  .mobile-cta-btn:hover {
    background-color: var(--color-brand-700);
  }

  @media (max-width: 768px) {
    .header-nav,
    .header-cta {
      display: none;
    }

    .mobile-menu-btn {
      display: flex;
    }

    .mobile-menu.open {
      display: block;
    }
  }
</style>

<script>
  const btn = document.getElementById('mobile-menu-btn');
  const menu = document.getElementById('mobile-menu');

  btn?.addEventListener('click', () => {
    const isOpen = menu?.classList.toggle('open');
    btn.setAttribute('aria-expanded', String(isOpen));
    menu?.setAttribute('aria-hidden', String(!isOpen));
  });
</script>
