---
// HamburgerMenu - drawer slide-in left avec liens nav (PC2)
// Astro vanilla + script inline, pas besoin d'island Vue
---
<button
  id="hamburger-trigger"
  type="button"
  class="fixed top-4 right-4 z-50 p-3 bg-white/95 border border-neutral-200 rounded-lg shadow-md hover:bg-white transition-colors md:top-6 md:right-6"
  aria-label="Ouvrir le menu"
  aria-expanded="false"
  aria-controls="hamburger-drawer"
>
  <span class="block w-5 h-0.5 bg-neutral-800 mb-1"></span>
  <span class="block w-5 h-0.5 bg-neutral-800 mb-1"></span>
  <span class="block w-5 h-0.5 bg-neutral-800"></span>
</button>

<div
  id="hamburger-drawer"
  class="fixed inset-0 z-40 hidden"
  role="dialog"
  aria-modal="true"
  aria-label="Menu de navigation"
>
  <div
    class="absolute inset-0 bg-black/30 transition-opacity"
    data-drawer-close
    aria-hidden="true"
  ></div>
  <nav
    id="hamburger-nav"
    class="absolute left-0 top-0 h-full w-72 max-w-[80vw] bg-white shadow-xl p-6 transform -translate-x-full transition-transform duration-200 ease-out"
  >
    <button
      type="button"
      data-drawer-close
      class="absolute top-4 right-4 w-9 h-9 flex items-center justify-center text-neutral-500 hover:text-neutral-900 text-2xl leading-none rounded-md hover:bg-neutral-100"
      aria-label="Fermer le menu"
    >
      &times;
    </button>
    <ul class="mt-12 space-y-1 text-base">
      <li>
        <a
          href="/a-propos"
          class="block px-3 py-2 rounded-md text-neutral-800 hover:bg-neutral-100 hover:text-neutral-900 transition-colors"
        >
          A propos
        </a>
      </li>
      <li>
        <a
          href="/manifeste"
          class="block px-3 py-2 rounded-md text-neutral-800 hover:bg-neutral-100 hover:text-neutral-900 transition-colors"
        >
          Manifeste
        </a>
      </li>
      <li>
        <a
          href="/mentions-legales"
          class="block px-3 py-2 rounded-md text-neutral-800 hover:bg-neutral-100 hover:text-neutral-900 transition-colors"
        >
          Mentions legales
        </a>
      </li>
      <!-- TODO V2 : ajouter liens ici (newsletter, soutien Liberapay, contact) -->
    </ul>
  </nav>
</div>

<script>
  const trigger = document.getElementById('hamburger-trigger');
  const drawer = document.getElementById('hamburger-drawer');
  const nav = document.getElementById('hamburger-nav');

  const open = () => {
    if (!drawer || !nav) return;
    drawer.classList.remove('hidden');
    trigger?.setAttribute('aria-expanded', 'true');
    requestAnimationFrame(() => nav.classList.remove('-translate-x-full'));
  };

  const close = () => {
    if (!drawer || !nav) return;
    nav.classList.add('-translate-x-full');
    trigger?.setAttribute('aria-expanded', 'false');
    setTimeout(() => drawer.classList.add('hidden'), 200);
  };

  trigger?.addEventListener('click', open);

  drawer?.querySelectorAll('[data-drawer-close]').forEach((el) =>
    el.addEventListener('click', close)
  );

  // ESC pour fermer
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && drawer && !drawer.classList.contains('hidden')) {
      close();
    }
  });
</script>