---
import { getLocale, getPath, getUI } from "~/utils/i18n";

const locale = getLocale(Astro);
const getLocalePath = getPath(locale);
const {
  components: {
    nav: { menu },
  },
} = getUI(locale);
---

<!-- Hidden checkbox for menu toggle -->
<input
  type="checkbox"
  id="mobile-menu-toggle"
  class="peer sr-only lg:hidden"
  aria-hidden="true"
/>

<!-- Mobile Slide Menu -->
<div
  id="mobile-menu"
  class="fixed inset-y-0 right-0 z-40 w-64 translate-x-full transform bg-paper shadow-lg transition-transform duration-300 peer-checked:translate-x-0 lg:hidden"
>
  <div class="flex items-center justify-between border-b border-dark px-4 py-2">
    <div class="text-lg font-bold">{menu.menu}</div>
    <label
      for="mobile-menu-toggle"
      class="cursor-pointer p-2 text-dark"
      aria-label="Close menu"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-6 w-6"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width={2}
          d="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </label>
  </div>
  <nav class="px-4 py-2">
    <ul class="space-y-4">
      <!-- Getting Started Links -->
      <li>
        <div class="mb-2 font-bold">{menu.gettingStarted}</div>
        <ul class="ml-4 space-y-2">
          <li>
            <a
              href={getLocalePath('/mods')}
              class="block text-dark hover:text-coral">{menu.zenMods}</a
            >
          </li>
          <li>
            <a
              href={getLocalePath('/release-notes')}
              class="block text-dark hover:text-coral">{menu.releaseNotes}</a
            >
          </li>
          <li>
            <a
              href="https://discord.gg/zen-browser"
              class="block text-dark hover:text-coral">{menu.discord}</a
            >
          </li>
        </ul>
      </li>
      <!-- Useful Links -->
      <li>
        <div class="mb-2 font-bold">{menu.usefulLinks}</div>
        <ul class="ml-4 space-y-2">
          <li>
            <a
              href={getLocalePath('/donate')}
              class="block text-dark hover:text-coral">{menu.donate}</a
            >
          </li>
          <li>
            <a
              href={getLocalePath('/about')}
              class="block text-dark hover:text-coral">{menu.aboutUs}</a
            >
          </li>
          <li>
            <a
              href="https://docs.zen-browser.app"
              class="block text-dark hover:text-coral">{menu.documentation}</a
            >
          </li>
          <li>
            <a
              href="https://github.com/zen-browser"
              target="_blank"
              class="block text-dark hover:text-coral">{menu.github}</a
            >
          </li>
        </ul>
      </li>
      <!-- Extra Links -->
      <li>
        <a
          href={getLocalePath('/mods')}
          class="block font-bold text-dark hover:text-coral">{menu.mods}</a
        >
      </li>
      <li>
        <a
          href={getLocalePath('/download')}
          class="block font-bold text-dark hover:text-coral">{menu.download}</a
        >
      </li>
    </ul>
  </nav>
</div>

<!-- Overlay for Mobile Menu -->
<label
  for="mobile-menu-toggle"
  class="pointer-events-none fixed inset-0 z-30 bg-black opacity-0 transition-opacity duration-300 peer-checked:pointer-events-auto peer-checked:opacity-50"
  aria-hidden="true"></label>