<div
  id="menu-overlay"
  class="fixed inset-0 bg-black/50 backdrop-blur opacity-0 invisible transition-all duration-200 z-40"
  @click="closeMenu()"
>
  <div
    class="fixed top-0 right-0 h-screen w-full max-w-sm bg-bg border-l border-border overflow-y-auto transform translate-x-full transition-transform duration-300 z-50"
    @click.stop
    x-ref="menuPanel"
  >
    <!-- Close button -->
    <div class="flex items-center justify-between p-6 border-b border-border">
      <span class="font-bold text-lg text-accent font-oxanium">Menu</span>
      <button
        @click="closeMenu()"
        aria-label="{{ i18n "closeMenu" }}"
        class="p-2 hover:bg-surface rounded transition-colors"
      >
        <i data-feather="x" class="w-5 h-5"></i>
      </button>
    </div>

    <!-- Menu items -->
    <nav class="p-6">
      {{ range .Site.Menus.main }}
        <a
          href="{{ .URL }}"
          class="block py-4 text-lg font-medium hover:text-accent transition-colors border-b border-border/30"
        >
          {{ i18n .Name }}
        </a>
      {{ end }}
    </nav>

    <!-- Divider -->
    <div class="border-t border-border/30 mx-6"></div>

    <!-- Language switcher -->
    <div class="p-6">
      <div class="text-sm text-text-dim mb-3">{{ i18n "language" }}</div>
      <div class="flex gap-2">
        {{ range .Site.Languages }}
          {{ $current := eq . $.Page.Language }}
          <a
            href="{{ .LanguagePrefix }}"
            class="flex-1 py-2 px-3 text-center rounded transition-colors {{ if $current }}bg-accent text-white{{ else }}bg-surface hover:bg-surface/80{{ end }}"
          >
            {{ .LanguageName }}
          </a>
        {{ end }}
      </div>
    </div>

    <!-- Theme toggle -->
    <div class="p-6 border-t border-border/30">
      <button
        id="theme-toggle"
        @click="closeMenu()"
        class="w-full py-3 px-4 bg-surface hover:bg-surface/80 rounded flex items-center justify-center gap-2 transition-colors"
      >
        <i data-feather="moon" class="w-4 h-4"></i>
        <span>{{ i18n "toggleTheme" }}</span>
      </button>
    </div>
  </div>
</div>

<script>
  document.addEventListener('alpine:init', () => {
    Alpine.store('menu', {
      isOpen: false,
      toggle() {
        this.isOpen = !this.isOpen;
        document.getElementById('menu-overlay').classList.toggle('opacity-0');
        document.getElementById('menu-overlay').classList.toggle('invisible');
        document.querySelector('[x-ref="menuPanel"]').classList.toggle('translate-x-full');
        document.body.style.overflow = this.isOpen ? 'hidden' : '';
      },
      close() {
        if (this.isOpen) {
          this.toggle();
        }
      }
    });
  });

  function closeMenu() {
    Alpine.store('menu').close();
  }

  document.getElementById('menu-toggle').addEventListener('click', () => {
    Alpine.store('menu').toggle();
  });

  // Close menu on Escape key
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      closeMenu();
    }
  });
</script>
