---
import { Image } from "astro:assets"
import logo from "../assets/logo.png"
---

<header class="flex w-full items-center justify-between bg-gray-800 p-8 text-white">
  <a href="/">
    <Image src={logo} alt="Logo Photo Club Haute Lozère" width={128} height={77} />
  </a>
  <nav>
    <div class="flex md:hidden">
      <button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-200" id="menu-open">
        <span class="sr-only">Ouvrir le menu</span>
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
        </svg>
      </button>
    </div>
    <div class="hidden md:block">
      <ul class="flex items-center gap-2 space-x-4">
        <li>
          <a href="/le-club" class="font-poppins text-xl">
            Le club
          </a>
        </li>
        <li>
          <a href="/galeries" class="font-poppins text-xl">
            Galeries
          </a>
        </li>
        <li>
          <a href="/contact" class="font-poppins text-xl">
            Contact
          </a>
        </li>
        <li>
          <a
            href="/espace-membres"
            class="bg-white px-6 py-2 font-poppins text-xl text-stone-900"
          >
            Espace membres
          </a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="hidden" role="dialog" aria-modal="true" style="display: none" id="mobile-menu">
    <div class="fixed inset-0 z-10" id="menu-click-over"></div>
    <div class="fixed right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6
      sm:max-w-sm ring-1 ring-gray-900/10 sm:right-4  rounded-md">
      <div class="flex items-center justify-end">
        <button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700" id="menu-close">
          <span class="sr-only">Fermer</span>
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      <div class="mt-6">
        <nav class="grid gap-6 text-gray-700">
          <a href="/le-club" class="-m-3 p-3 flex items-center rounded-lg hover:bg-gray-50">
            <div class="ml-4 text-base font-medium">
              Le club
            </div>
          </a>
          <a href="/galeries" class="-m-3 p-3 flex items-center rounded-lg hover:bg-gray-50">
            <div class="ml-4 text-base font-medium">
              Galeries
            </div>
          </a>
          <a href="/contact" class="-m-3 p-3 flex items-center rounded-lg hover:bg-gray-50">
            <div class="ml-4 text-base font-medium">
              Contact
            </div>
          </a>
          <a href="/espace-membres" class="-m-3 p-3 flex items-center rounded-lg hover:bg-gray-50">
            <div class="ml-4 text-base font-medium">
              Espace membres
            </div>
          </a>
        </nav>
      </div>
    </div>

  </div>
</header>
<script>
  const menu = document.querySelector('#mobile-menu')
  const menuOpen = document.querySelector('#menu-open')
  const menuClose = document.querySelector('#menu-close')
  if (!menu || !menuOpen || !menuClose) {
    throw new Error('Missing menu elements')
  }

  menuOpen.addEventListener('click', () => {
    menu.setAttribute('style', 'display: block')
    menuOpen.setAttribute('style', 'display: none')
  })

  menuClose.addEventListener('click', () => {
    menu.setAttribute('style', 'display: none')
    menuOpen.setAttribute('style', 'display: block')
  })

  const menuClickOver = document.querySelector('#menu-click-over')
  if (!menuClickOver) {
    throw new Error('Missing menu click over element')
  }
  document.addEventListener('click', (event) => {
    if (event.target === menuClickOver) {
      menu.setAttribute('style', 'display: none')
      menuOpen.setAttribute('style', 'display: block')
    }
  })
</script>