@php
    $firstFeatureNavbar = [
        [
            'title' => 'About',
            'url' => route('page', 'about'),
        ],
        [
            'title' => 'Accommodation',
            'url' => route('page', 'accommodation'),
        ],
        [
            'title' => 'Service & Facilities',
            'url' => route('page', 'service-facilities'),
        ],
        [
            'title' => 'Restaurant',
            'url' => route('page', 'restaurant'),
        ],
         [
            'title' => 'Special Offers',
            'url' => route('page', 'special-offers'),
        ],
        [
            'title' => 'Galleries',
            'url' => route('page', 'galleries'),
        ],
    ];
@endphp
<header>
    <nav class="fixed top-0 w-full z-50 backdrop-luxury border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <div class="flex items-center justify-between">
                <div class="text-white font-primary font-bold text-xl sm:text-2xl tracking-wider">
                    <a href="{{ route('landing.index') }}">
                        <img src="{{ asset('assets/img/static/placeholder/lazy.png') }}"
                            data-src="{{ asset('assets/img/static/logo/logo.png') }}" alt="Logo {{ config('app.name') }}"
                            class="lazy w-[70px]">
                    </a>
                </div>
                <div class="hidden lg:flex items-center space-x-8 text-black text-sm font-secondary uppercase">
                    @foreach ($firstFeatureNavbar ?? [] as $item)
                        <a href="{{ $item['url'] ?? '#' }}"
                            class="hover:text-primary transition-colors duration-300 py-2">{{ $item['title'] ?? '' }}</a>
                    @endforeach
                </div>
                <div class="hidden lg:flex items-center space-x-6">
                    <a href="{{ config('app.booking_url') }}"
                        class="text-white border-2 gold-border px-6 py-2 text-sm font-secondary uppercase tracking-wider hover:text-white transition-all duration-300">
                        Book Now
                    </a>
                </div>
                <div class="flex lg:hidden">
                    <button type="button" id="mobile-menu-button" class="hamburger" name="mobile-menu-button">
                        <span></span>
                        <span></span>
                        <span></span>
                    </button>
                </div>
            </div>
        </div>
        <div id="mobile-menu" class="mobile-menu fixed top-0 right-0 w-full sm:w-80 h-full z-40 lg:hidden">
            <div class="bg-gray-900 p-8 pt-20 h-screen">
                <div class="flex justify-end mb-8">
                    <button id="close-menu-button" class="text-white hover:text-primary transition-colors duration-300">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M6 18L18 6M6 6l12 12">
                            </path>
                        </svg>
                    </button>
                </div>
                <div class="space-y-6">
                    @foreach ($firstFeatureNavbar ?? [] as $item)
                        <a href="{{ $item['url'] ?? '#' }}"
                            class="menu-item block text-dark font-secondary text-lg uppercase tracking-widest hover:text-primary transition-colors duration-300 border-b border-gray-700 pb-4">{{ $item['title'] ?? '' }}</a>
                    @endforeach
                    <div class="menu-item pt-6 space-y-4">
                        <a href="{{ config('app.booking_url') }}"
                            class="w-full text-white border-2 gold-border px-6 py-3 text-sm font-secondary uppercase tracking-wider hover:bg-yellow-200 hover:text-gray-900 transition-all duration-300">
                            Book Now
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</header>