{{-- NAVIGATION MENU --}}
<header class="bg-white">
    <nav class="mx-auto bree-serif-regular uppercase text-gray-400 flex max-w-7xl items-center justify-between p-6 lg:px-8"
        aria-label="Global">
        <div class="flex flex-1">
            <div class="hidden lg:flex lg:gap-x-12">
                <a href="{{ route('about') }}"
                    class="text-base pb-3 hover:text-gray-700 hover:border-b hover:border-stone-700 transition-all">TARİHÇE</a>
                <a href="#"
                    class="text-base pb-3 hover:text-gray-700 hover:border-b hover:border-stone-700 transition-all">MİMARİ</a>
                <a href="#"
                    class="text-base pb-3 hover:text-gray-700 hover:border-b hover:border-stone-700 transition-all">GALERİ</a>
            </div>
            <div class="flex lg:hidden">
                <button type="button" x-data="" @click="$dispatch('open-menu')"
                    class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
                    <span class="sr-only">Open main menu</span>
                    <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                        aria-hidden="true" data-slot="icon">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                    </svg>
                </button>
                <div x-data="{ open: false }" @open-menu.window="open = true" class="lg:hidden">
                    <!-- Background backdrop, show/hide based on slide-over state. -->
                    <div x-show="open" class="fixed inset-0 z-10 bg-gray-500 bg-opacity-75 transition-opacity"
                        x-transition:enter="transition-opacity ease-linear duration-300"
                        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                        x-transition:leave="transition-opacity ease-linear duration-300"
                        x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"></div>

                    <div x-show="open" class="fixed inset-y-0 left-0 z-10 w-full overflow-y-auto bg-white px-6 py-6"
                        x-transition:enter="transform transition ease-in-out duration-300"
                        x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0"
                        x-transition:leave="transform transition ease-in-out duration-300"
                        x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full">
                        <div class="flex items-center justify-between">
                            <div class="flex flex-1">
                                <button @click="open = false" type="button"
                                    class="-m-2.5 rounded-md p-2.5 text-gray-700">
                                    <span class="sr-only">Close menu</span>
                                    <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                        stroke="currentColor" aria-hidden="true" data-slot="icon">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                                    </svg>
                                </button>
                            </div>
                            <a href="#" class="-m-1.5 p-1.5">
                                <span class="sr-only">Your Company</span>
                                <img class="h-8 w-auto" src="{{ asset('assets/img/ulucami-logo-mosque.png') }}"
                                    alt="">
                            </a>
                            <div class="flex flex-1 justify-end">
                                <!-- Removed login button -->
                            </div>
                        </div>
                        <div class="mt-6 space-y-2">
                            <a href="{{ route('about') }}"
                                class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">TARİHÇE</a>
                            <a href="#"
                                class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">MİMARİ</a>
                            <a href="#"
                                class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">GALERİ</a>
                            <a href="{{ route('artifacts') }}"
                                class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">HATLAR
                                & ESERLER</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a href="{{ route('home') }}" class="grid justify-items-center gap-y-2">
            <span class="sr-only">Ulu Cami | Bursa 1399</span>
            <img class="hidden sm:block h-14 sm:h-20 w-auto" src="{{ asset('assets/img/ulucami-logo-mosque.png') }}"
                alt="">
            <img class="h-10 sm:h-12 w-auto" src="{{ asset('assets/img/ulucami-text-gray.svg') }}" alt="">
        </a>
        <div class="flex flex-1 justify-end lg:gap-x-12">
            <a href="{{ route('artifacts') }}"
                class="hidden lg:flex gap-x-2 text-base pb-3 hover:text-gray-700 hover:border-b hover:border-stone-700 transition-all">
                <span class="material-symbols-outlined">
                    headphones
                </span>
                HATLAR & ESERLER</a>
        </div>
    </nav>
    <!-- Mobile menu, show/hide based on menu open state. -->

    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script>
        document.querySelector('button[type="button"]:not([aria-hidden="true"])').addEventListener('click', function() {
            const mobileMenu = document.querySelector('[x-data="{ open: false }"]').__x;
            mobileMenu.$data.open = true;
        });
    </script>
</header>