@php
    $headerMode = $headerMode ?? 'solid'; // 'solid' | 'overlay'
    $isOverlay = $headerMode === 'overlay';

    // styles
    $wrapClass = $isOverlay
        ? 'absolute top-0 left-0 right-0 z-50'
        : 'sticky top-0 left-0 right-0 z-50';

    $mainBg = $isOverlay
        ? 'bg-transparent'
        : 'bg-white border-b border-slate-200';

    $textMain = $isOverlay ? 'text-white' : 'text-slate-900';
    $textSub = $isOverlay ? 'text-white/70' : 'text-slate-500';
    $navText = $isOverlay ? 'text-white/90' : 'text-slate-700';

    // links (change later if needed)
    $loginUrl = url('');
@endphp

<header class="{{ $wrapClass }}">
    {{-- TOP BAR --}}
    <div class="hidden md:block bg-black/80 text-white/90 text-[12px]">
        <div class="container-site">
            <div class="h-10 flex items-center justify-between">
                <div class="flex items-center gap-3">

                    <span class="uppercase tracking-[.22em] text-white/70 font-semibold">
                        Follow us:
                    </span>

                    @if($siteSettings?->instagram)
                        <a href="{{ $siteSettings->instagram }}" target="_blank" class="hover:text-gold-400"
                            aria-label="Instagram">
                            <i class="fa-brands fa-instagram"></i>
                        </a>
                    @endif

                    @if($siteSettings?->facebook)
                        <a href="{{ $siteSettings->facebook }}" target="_blank" class="hover:text-gold-400"
                            aria-label="Facebook">
                            <i class="fa-brands fa-facebook-f"></i>
                        </a>
                    @endif

                    @if($siteSettings?->linkedin)
                        <a href="{{ $siteSettings->linkedin }}" target="_blank" class="hover:text-gold-400"
                            aria-label="LinkedIn">
                            <i class="fa-brands fa-linkedin"></i>
                        </a>
                    @endif

                    @if($siteSettings?->youtube)
                        <a href="{{ $siteSettings->youtube }}" target="_blank" class="hover:text-gold-400"
                            aria-label="YouTube">
                            <i class="fa-brands fa-youtube"></i>
                        </a>
                    @endif

                    @if($siteSettings?->tiktok)
                        <a href="{{ $siteSettings->tiktok }}" target="_blank" class="hover:text-gold-400"
                            aria-label="TikTok">
                            <i class="fa-brands fa-tiktok"></i>
                        </a>
                    @endif

                    <span class="mx-3 h-4 w-px bg-white/20"></span>

                    @if($siteSettings?->phone)
                        <a href="tel:{{ preg_replace('/\D/', '', $siteSettings->phone) }}" class="hover:text-gold-400">
                            {{ $siteSettings->phone }}
                        </a>
                    @endif

                </div>
                {{--
                <a href="{{ $loginUrl }}" class="uppercase tracking-[.22em] font-semibold hover:text-gold-400">
                    Login
                </a>
                --}}
            </div>
        </div>
    </div>

    {{-- MAIN HEADER --}}
    <div class="{{ $mainBg }} {{ $isOverlay ? '' : 'backdrop-blur' }}">
        <div class="container-site">
            <div class="h-20 md:h-24 flex items-center justify-between gap-4">

                {{-- Logo --}}
                <a href="{{ route('home') }}" class="flex items-center gap-3">
                    <img src="{{ asset('images/logo.png') }}" alt="Visit Sri Lanka 360"
                        class="h-12 md:h-14 w-auto object-contain">

                    <div class="leading-tight">
                        <div class="{{ $textMain }} font-semibold tracking-wide">Visit Sri Lanka</div>
                        <div class="{{ $textSub }} text-xs tracking-[.18em] uppercase -mt-0.5">360 Travel</div>
                    </div>
                </a>

                {{-- Desktop nav --}}
                <nav
                    class="hidden lg:flex items-center gap-9 text-[12px] font-semibold tracking-[.22em] uppercase {{ $navText }}">
                    <a href="{{ route('home') }}"
                        class="hover:text-gold-400 {{ request()->routeIs('home') ? 'text-gold-400' : '' }}">Home</a>

                    <a href="{{ route('destinations.index') }}"
                        class="hover:text-gold-400 {{ request()->routeIs('destinations.*') ? 'text-gold-400' : '' }}">Destinations</a>

                    <a href="{{ route('tours.index') }}"
                        class="hover:text-gold-400 {{ request()->routeIs('tours.*') ? 'text-gold-400' : '' }}">Tours</a>

                    <a href="{{ route('excursions.request') }}"
                        class="hover:text-gold-400 {{ request()->routeIs('excursions.*') ? 'text-gold-400' : '' }}">Excursions</a>

                    <a href="{{ route('blog.index') }}"
                        class="hover:text-gold-400 {{ request()->routeIs('blog.*') ? 'text-gold-400' : '' }}">Blog</a>

                    <a href="{{ route('about') }}"
                        class="hover:text-gold-400 {{ request()->routeIs('about') ? 'text-gold-400' : '' }}">About</a>

                    <a href="{{ route('contact') }}"
                        class="hover:text-gold-400 {{ request()->routeIs('contact') ? 'text-gold-400' : '' }}">Contact</a>
                </nav>

                {{-- Icons + hamburger --}}
                <div class="flex items-center gap-3">
                    {{--
                    <button
                        class="hidden lg:inline-flex h-10 w-10 items-center justify-center {{ $navText }} hover:text-gold-400"
                        type="button" aria-label="Search">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </button>

                    <button
                        class="hidden lg:inline-flex h-10 w-10 items-center justify-center {{ $navText }} hover:text-gold-400"
                        type="button" aria-label="Cart">
                        <i class="fa-solid fa-cart-shopping"></i>
                    </button>
                    --}}

                    <button id="navBtn"
                        class="inline-flex h-11 w-11 items-center justify-center bg-gold-500 text-black/90 hover:bg-gold-600"
                        type="button" aria-label="Menu" aria-expanded="false">
                        <i class="fa-solid fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- ✅ OFFCANVAS MENU (mobile) --}}
    <div id="mobileOverlay" class="fixed inset-0 z-[60] hidden" aria-hidden="true">
        {{-- Backdrop --}}
        <div id="mobileBackdrop" class="absolute inset-0 bg-black/55 backdrop-blur-[1px]"></div>

        {{-- Panel --}}
        <div id="mobilePanel" class="absolute right-0 top-0 h-full w-[86%] max-w-sm
                    {{ $isOverlay ? 'bg-slate-950/90 text-white' : 'bg-white text-slate-900' }}
                    shadow-2xl translate-x-full transition-transform duration-300 ease-out">

            {{-- Panel header --}}
            <div
                class="h-20 px-5 flex items-center justify-between border-b {{ $isOverlay ? 'border-white/10' : 'border-slate-200' }}">
                <div class="flex items-center gap-3">
                    <div class="h-10 w-10 border-2 border-gold-500 grid place-items-center">
                        <span class="font-semibold {{ $isOverlay ? 'text-white' : 'text-slate-900' }}">V</span>
                    </div>
                    <div class="leading-tight">
                        <div class="{{ $isOverlay ? 'text-white' : 'text-slate-900' }} font-semibold tracking-wide">
                            Visit Sri Lanka</div>
                        <div
                            class="{{ $isOverlay ? 'text-white/70' : 'text-slate-500' }} text-xs tracking-[.18em] uppercase -mt-0.5">
                            360 Travel</div>
                    </div>
                </div>

                <button id="mobileClose" type="button" class="h-11 w-11 rounded-2xl border {{ $isOverlay ? 'border-white/15 hover:bg-white/10' : 'border-slate-200 hover:bg-slate-50' }}
                               grid place-items-center" aria-label="Close menu">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>

            {{-- Panel body --}}
            <div class="p-5">
                {{-- Quick actions --}}
                <div class="grid grid-cols-2 gap-3">
                    <a href="{{ route('custom.tour') }}" class="rounded-2xl border {{ $isOverlay ? 'border-white/15 hover:bg-white/10 text-white' : 'border-slate-200 hover:bg-slate-50 text-slate-900' }}
                              px-4 py-3 text-sm font-semibold">
                        <i class="fa-solid fa-wand-magic-sparkles mr-2 text-gold-500"></i>
                        Custom Tour
                    </a>

                    <a href="{{ url('/tours') }}"
                        class="rounded-2xl bg-gold-500 px-4 py-3 text-sm font-semibold text-black hover:bg-gold-600 text-center">
                        <i class="fa-solid fa-ticket mr-2"></i>
                        Packages
                    </a>
                </div>

                {{-- Links --}}
                <div
                    class="mt-5 grid gap-1 text-[12px] font-semibold tracking-[.22em] uppercase {{ $isOverlay ? 'text-white/90' : 'text-slate-800' }}">
                    <a href="{{ route('home') }}"
                        class="px-4 py-3 rounded-2xl {{ request()->routeIs('home') ? ($isOverlay ? 'bg-white/10 text-gold-400' : 'bg-gold-500/10 text-gold-700') : ($isOverlay ? 'hover:bg-white/10' : 'hover:bg-slate-50') }}">
                        Home
                    </a>

                    <a href="{{ route('destinations.index') }}"
                        class="px-4 py-3 rounded-2xl {{ request()->routeIs('destinations.*') ? ($isOverlay ? 'bg-white/10 text-gold-400' : 'bg-gold-500/10 text-gold-700') : ($isOverlay ? 'hover:bg-white/10' : 'hover:bg-slate-50') }}">
                        Destinations
                    </a>

                    <a href="{{ route('tours.index') }}"
                        class="px-4 py-3 rounded-2xl {{ request()->routeIs('tours.*') ? ($isOverlay ? 'bg-white/10 text-gold-400' : 'bg-gold-500/10 text-gold-700') : ($isOverlay ? 'hover:bg-white/10' : 'hover:bg-slate-50') }}">
                        Tours
                    </a>

                    <a href="{{ route('excursions.request') }}"
                        class="px-4 py-3 rounded-2xl {{ request()->routeIs('excursions.*') ? ($isOverlay ? 'bg-white/10 text-gold-400' : 'bg-gold-500/10 text-gold-700') : ($isOverlay ? 'hover:bg-white/10' : 'hover:bg-slate-50') }}">
                        Excursions
                    </a>

                    <a href="{{ route('blog.index') }}"
                        class="px-4 py-3 rounded-2xl {{ request()->routeIs('blog.*') ? ($isOverlay ? 'bg-white/10 text-gold-400' : 'bg-gold-500/10 text-gold-700') : ($isOverlay ? 'hover:bg-white/10' : 'hover:bg-slate-50') }}">
                        Blog
                    </a>

                    <a href="{{ route('about') }}"
                        class="px-4 py-3 rounded-2xl {{ request()->routeIs('about') ? ($isOverlay ? 'bg-white/10 text-gold-400' : 'bg-gold-500/10 text-gold-700') : ($isOverlay ? 'hover:bg-white/10' : 'hover:bg-slate-50') }}">
                        About
                    </a>

                    <a href="{{ route('contact') }}"
                        class="px-4 py-3 rounded-2xl {{ request()->routeIs('contact') ? ($isOverlay ? 'bg-white/10 text-gold-400' : 'bg-gold-500/10 text-gold-700') : ($isOverlay ? 'hover:bg-white/10' : 'hover:bg-slate-50') }}">
                        Contact
                    </a>
                </div>
                {{-- Footer --}}
                <div class="mt-6 pt-6 border-t {{ $isOverlay ? 'border-white/10' : 'border-slate-200' }}">

                    <div
                        class="flex items-center justify-between text-sm {{ $isOverlay ? 'text-white/80' : 'text-slate-600' }}">

                        @if($siteSettings?->phone)
                            <a href="tel:{{ preg_replace('/\D/', '', $siteSettings->phone) }}" class="hover:text-gold-400">
                                <i class="fa-solid fa-phone mr-2"></i>
                                {{ $siteSettings->phone }}
                            </a>
                        @endif
                        {{--
                        <a href="{{ $loginUrl }}" class="hover:text-gold-400 font-semibold">
                            Login
                        </a>
                        --}}

                    </div>


                    <div class="mt-4 flex items-center gap-4 {{ $isOverlay ? 'text-white/70' : 'text-slate-500' }}">

                        @if($siteSettings?->instagram)
                            <a href="{{ $siteSettings->instagram }}" target="_blank" class="hover:text-gold-400">
                                <i class="fa-brands fa-instagram"></i>
                            </a>
                        @endif

                        @if($siteSettings?->facebook)
                            <a href="{{ $siteSettings->facebook }}" target="_blank" class="hover:text-gold-400">
                                <i class="fa-brands fa-facebook-f"></i>
                            </a>
                        @endif

                        @if($siteSettings?->linkedin)
                            <a href="{{ $siteSettings->linkedin }}" target="_blank" class="hover:text-gold-400">
                                <i class="fa-brands fa-linkedin"></i>
                            </a>
                        @endif

                        @if($siteSettings?->youtube)
                            <a href="{{ $siteSettings->youtube }}" target="_blank" class="hover:text-gold-400">
                                <i class="fa-brands fa-youtube"></i>
                            </a>
                        @endif

                        @if($siteSettings?->tiktok)
                            <a href="{{ $siteSettings->tiktok }}" target="_blank" class="hover:text-gold-400">
                                <i class="fa-brands fa-tiktok"></i>
                            </a>
                        @endif

                    </div>

                </div>
            </div>
        </div>
    </div>

    {{-- ✅ OFFCANVAS JS --}}
    <script>
        (() => {
            const btn = document.getElementById('navBtn');
            const overlay = document.getElementById('mobileOverlay');
            const panel = document.getElementById('mobilePanel');
            const closeBtn = document.getElementById('mobileClose');
            const backdrop = document.getElementById('mobileBackdrop');

            if (!btn || !overlay || !panel) return;

            const open = () => {
                overlay.classList.remove('hidden');
                document.body.classList.add('overflow-hidden');
                requestAnimationFrame(() => panel.classList.remove('translate-x-full'));
                btn.setAttribute('aria-expanded', 'true');
            };

            const close = () => {
                panel.classList.add('translate-x-full');
                btn.setAttribute('aria-expanded', 'false');
                document.body.classList.remove('overflow-hidden');
                setTimeout(() => overlay.classList.add('hidden'), 220);
            };

            btn.addEventListener('click', () => {
                const isHidden = overlay.classList.contains('hidden');
                isHidden ? open() : close();
            });

            closeBtn?.addEventListener('click', close);
            backdrop?.addEventListener('click', close);

            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape' && !overlay.classList.contains('hidden')) close();
            });

            // Close when clicking a link in panel
            panel.addEventListener('click', (e) => {
                const a = e.target.closest('a');
                if (a) close();
            });
        })();
    </script>
</header>