@php
    $navServices = $navServices ?? config('brokam.services');
    $isActive = fn ($pattern) => request()->routeIs($pattern) ? 'text-brand-600' : 'text-slate-700 hover:text-brand-600';
@endphp

<header x-data="{ open: false, mega: false, scrolled: false }"
        @scroll.window="scrolled = window.scrollY > 8"
        class="sticky top-0 z-40">
    <div class="border-b transition-colors duration-300"
         :class="scrolled ? 'border-slate-200 bg-paper/90 backdrop-blur-xl shadow-[0_4px_24px_-18px_rgba(20,37,59,.5)]' : 'border-transparent bg-paper/70 backdrop-blur-md'">
        <div class="shell flex items-center justify-between h-16 gap-6">
            <a href="{{ route('home') }}" class="flex items-center shrink-0" aria-label="Brokam International home">
                <img src="{{ asset('brand/v2_horizontal.svg') }}" alt="Brokam International" class="h-7 w-auto">
            </a>

            <nav class="hidden lg:flex items-center gap-8 text-sm font-medium" aria-label="Primary">
                <div class="relative" @mouseenter="mega = true" @mouseleave="mega = false">
                    <button class="inline-flex items-center gap-1.5 {{ $isActive('services.*') }} transition" @click="mega = !mega" :aria-expanded="mega">
                        Services
                        <svg class="w-3.5 h-3.5 transition-transform" :class="mega && 'rotate-180'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6l6-6"/></svg>
                    </button>

                    <div x-show="mega" x-transition.opacity x-cloak class="absolute left-1/2 -translate-x-1/2 top-full pt-4 w-[720px]">
                        <div class="rounded-2xl border border-slate-200 bg-white p-3 shadow-2xl grid grid-cols-2 gap-1">
                            @foreach ($navServices as $s)
                                <a href="{{ route('services.show', $s['slug']) }}" class="group flex items-start gap-3 rounded-xl p-3 hover:bg-paper-200 transition">
                                    <span class="shrink-0 grid place-items-center w-9 h-9 rounded-lg border border-brand-100 bg-brand-50 text-brand-600 group-hover:bg-brand-500 group-hover:text-white group-hover:border-brand-500 transition">
                                        <x-icon :name="$s['icon']" class="w-5 h-5"/>
                                    </span>
                                    <span>
                                        <span class="block font-semibold text-slate-ink text-sm">{{ $s['title'] }}</span>
                                        <span class="block text-xs text-slate-500 mt-0.5 leading-snug">{{ $s['tagline'] }}</span>
                                    </span>
                                </a>
                            @endforeach
                            <a href="{{ route('services.index') }}" class="col-span-2 mt-1 flex items-center justify-between rounded-xl p-3 border border-brand-200 bg-brand-50 text-brand-700 hover:bg-brand-100 transition">
                                <span class="font-semibold text-sm">All services &amp; delivery model</span>
                                <x-icon name="arrow" class="w-5 h-5"/>
                            </a>
                        </div>
                    </div>
                </div>

                <a href="{{ route('industries') }}" class="{{ $isActive('industries') }} transition">Industries</a>
                <a href="{{ route('approach') }}" class="{{ $isActive('approach') }} transition">Approach</a>
                <a href="{{ route('projects.index') }}" class="{{ $isActive('projects.*') }} transition">Work</a>
                <a href="{{ route('about') }}" class="{{ $isActive('about') }} transition">About</a>
                <a href="{{ route('news.index') }}" class="{{ $isActive('news.*') }} transition">News</a>
            </nav>

            <div class="hidden lg:flex items-center gap-2">
                <a href="{{ route('search') }}" class="grid place-items-center w-9 h-9 rounded-lg text-slate-500 hover:text-brand-600 hover:bg-paper-200 transition" aria-label="Search">
                    <x-icon name="search" class="w-5 h-5"/>
                </a>
                <a href="{{ config('brokam.erp_url') }}/login" class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-700 hover:text-brand-600 px-2.5 py-2 rounded-lg hover:bg-paper-200 transition">
                    <x-icon name="lock" class="w-4 h-4"/> ERP Login
                </a>
                <a href="{{ route('quote') }}" class="btn btn-primary text-sm !py-2.5 !px-4">
                    Request a Quote <x-icon name="arrow" class="w-4 h-4"/>
                </a>
            </div>

            <button @click="open = !open" class="lg:hidden grid place-items-center w-10 h-10 rounded-lg text-slate-ink hover:bg-paper-200" aria-label="Toggle menu" :aria-expanded="open">
                <x-icon name="menu" x-show="!open" class="w-6 h-6"/>
                <x-icon name="close" x-show="open" x-cloak class="w-6 h-6"/>
            </button>
        </div>
    </div>

    {{-- Mobile drawer --}}
    <div x-show="open" x-transition x-cloak class="lg:hidden border-b border-slate-200 bg-white shadow-xl">
        <nav class="shell py-5 flex flex-col" aria-label="Mobile">
            <p class="kicker mb-3">Services</p>
            @foreach ($navServices as $s)
                <a href="{{ route('services.show', $s['slug']) }}" class="flex items-center gap-3 py-2.5 text-slate-700">
                    <x-icon :name="$s['icon']" class="w-5 h-5 text-brand-600"/> {{ $s['title'] }}
                </a>
            @endforeach
            <div class="hairline my-3"></div>
            <a href="{{ route('industries') }}" class="py-2.5 font-medium text-slate-700">Industries</a>
            <a href="{{ route('approach') }}" class="py-2.5 font-medium text-slate-700">Approach</a>
            <a href="{{ route('projects.index') }}" class="py-2.5 font-medium text-slate-700">Work</a>
            <a href="{{ route('about') }}" class="py-2.5 font-medium text-slate-700">About</a>
            <a href="{{ route('news.index') }}" class="py-2.5 font-medium text-slate-700">News</a>
            <a href="{{ route('contact') }}" class="py-2.5 font-medium text-slate-700">Contact</a>
            <a href="{{ config('brokam.erp_url') }}/login" class="flex items-center gap-2 py-2.5 font-medium text-slate-700">
                <x-icon name="lock" class="w-5 h-5 text-brand-600"/> ERP Login
            </a>
            <a href="{{ route('quote') }}" class="btn btn-primary mt-4">Request a Quote <x-icon name="arrow" class="w-4 h-4"/></a>
        </nav>
    </div>
</header>