MNQ-Catering-y-Evento/src/components/SiteHeader.astro

---
interface Props {
  activeNav?: string;
}
const { activeNav } = Astro.props;
const whatsappAriaLabel = 'Contactar con MNQ por WhatsApp';

const links = [
  { href: '/bodas-reales',         label: 'Bodas',       key: 'bodas' },
  { href: '/corporativo-business', label: 'Corporativo', key: 'corporativo' },
  { href: '/reuniones-familiares', label: 'Social',      key: 'social' },
  { href: '/nosotros',             label: 'Nosotros',    key: 'nosotros' },
  { href: '/contacto',             label: 'Contacto',    key: 'contacto' },
];
---

<header class="site-header">
  <div class="page-wrap">

    <a href="/" class="site-brand-link" aria-label="MNQ Catering y Eventos — inicio">
      <img
        src="/images/logo-nav-dark.webp"
        alt="MNQ Catering y Eventos"
        class="site-logo-banner"
        width="600"
        height="232"
      />
    </a>

    <!-- Desktop nav -->
    <nav class="site-nav" aria-label="Principal">
      {links.map(({ href, label, key }) => (
        <a href={href} class={`nav-link${activeNav === key ? ' active' : ''}`}>
          {label}
        </a>
      ))}
    </nav>

    <div class="nav-actions">
      <!-- Hamburger (mobile) -->
      <button class="nav-toggle" id="navToggle" aria-label="Abrir menú" aria-expanded="false">
        <span class="hb-bar"></span>
        <span class="hb-bar"></span>
        <span class="hb-bar"></span>
      </button>
    </div>

  </div>
</header>

<!-- Mobile nav drawer -->
<div class="mobile-nav" id="mobileNav" aria-hidden="true">
  {links.map(({ href, label, key }) => (
    <a href={href} class={`mobile-nav-link${activeNav === key ? ' active' : ''}`}>
      {label}
    </a>
  ))}
  <a
    href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20cotizar%20mi%20evento"
    class="btn btn-primary mobile-wa"
    target="_blank"
    rel="noreferrer"
    aria-label={whatsappAriaLabel}
    style="width: 100%; justify-content: center; margin-top: 0.5rem;"
  >
    Consultar por WhatsApp
  </a>
</div>

<script>
  const toggle   = document.getElementById('navToggle')!;
  const mobileNav = document.getElementById('mobileNav')!;

  toggle.addEventListener('click', () => {
    const open = toggle.getAttribute('aria-expanded') === 'true';
    toggle.setAttribute('aria-expanded', String(!open));
    mobileNav.classList.toggle('open', !open);
    mobileNav.setAttribute('aria-hidden', String(open));
    document.body.style.overflow = open ? '' : 'hidden';
  });

  // Cerrar al navegar
  mobileNav.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', () => {
      toggle.setAttribute('aria-expanded', 'false');
      mobileNav.classList.remove('open');
      mobileNav.setAttribute('aria-hidden', 'true');
      document.body.style.overflow = '';
    });
  });
</script>

<style>
  /* ── Brand ── */
  .site-brand-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .site-logo-banner {
    height: 2.25rem;
    width: auto;
    object-fit: contain;
  }

  /* ── Hamburger ── */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
  }

  .hb-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-on-surface);
    border-radius: 2px;
    transition: transform 250ms, opacity 200ms;
  }

  .nav-toggle[aria-expanded="true"] .hb-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .hb-bar:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] .hb-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ── Mobile drawer ── */
  .mobile-nav {
    display: none;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    z-index: 49;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-outline-variant);
    padding: var(--space-6) var(--space-page) var(--space-8);
    flex-direction: column;
    gap: var(--space-4);
    box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
  }

  .mobile-nav.open {
    display: flex;
  }

  .mobile-nav-link {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-on-surface);
    padding: var(--space-3) 0;
    border-bottom: 1px solid rgb(208 197 175 / 20%);
    transition: color 200ms;
  }

  .mobile-nav-link.active,
  .mobile-nav-link:hover {
    color: var(--color-primary);
  }

  /* ── Desktop overrides ── */
  @media (min-width: 48rem) {
    .site-logo-banner { height: 3.25rem; }
    .nav-toggle        { display: none; }
    .mobile-nav        { display: none !important; }
  }
</style>