@php
    $nav = [
        ['label' => 'Home', 'route' => 'home'],
        ['label' => 'About Us', 'route' => 'about'],
        ['label' => 'Services', 'route' => 'services'],
        ['label' => 'Visa', 'route' => 'visa'],
    ];
    $resources = [
        ['label' => 'Our Services', 'route' => 'services', 'desc' => 'Education, visa & migration support'],
        ['label' => 'Points Calculator', 'route' => 'points', 'desc' => 'Estimate your skilled migration points'],
        ['label' => 'Citizenship Application', 'route' => 'citizenship', 'desc' => 'Your pathway to becoming a citizen'],
    ];
@endphp

<header class="sticky top-0 z-50">
    <div id="site-header" class="border-b border-slate-100 bg-white/90 backdrop-blur transition-shadow duration-300">
        <div class="container-x flex h-20 items-center justify-between gap-6">
            @include('partials.logo')

            {{-- Desktop nav --}}
            <nav class="hidden items-center gap-1 lg:flex" aria-label="Primary">
                @foreach ($nav as $item)
                    <a href="{{ route($item['route']) }}"
                       class="relative rounded-full px-4 py-2 text-sm font-medium transition-colors
                       {{ request()->routeIs($item['route']) ? 'text-brand-700' : 'text-slate-600 hover:text-brand-700' }}">
                        {{ $item['label'] }}
                        @if (request()->routeIs($item['route']))
                            <span class="absolute inset-x-4 -bottom-0.5 h-0.5 rounded-full bg-brand-600"></span>
                        @endif
                    </a>
                @endforeach

                {{-- Resources dropdown --}}
                <div class="relative" data-dropdown>
                    <button type="button" data-dropdown-trigger
                            class="flex items-center gap-1 rounded-full px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:text-brand-700
                            {{ request()->routeIs(['points','citizenship']) ? 'text-brand-700' : '' }}">
                        Resources
                        <svg class="h-4 w-4 transition-transform duration-200 [&.rot]:rotate-180" data-dropdown-caret viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.17l3.71-3.94a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd"/></svg>
                    </button>
                    <div data-dropdown-menu
                         class="invisible absolute right-0 top-full mt-3 w-72 origin-top-right translate-y-2 rounded-2xl border border-slate-100 bg-white p-2 opacity-0 shadow-xl shadow-slate-900/5 transition-all duration-200">
                        @foreach ($resources as $r)
                            <a href="{{ route($r['route']) }}" class="group flex flex-col gap-0.5 rounded-xl px-4 py-3 transition-colors hover:bg-brand-50">
                                <span class="text-sm font-semibold text-ink group-hover:text-brand-700">{{ $r['label'] }}</span>
                                <span class="text-xs text-slate-400">{{ $r['desc'] }}</span>
                            </a>
                        @endforeach
                    </div>
                </div>
            </nav>

            {{-- Right side --}}
            <div class="hidden items-center gap-5 lg:flex">
                <a href="tel:{{ config('site.phone_link') }}" class="flex items-center gap-3">
                    <span class="grid h-11 w-11 place-items-center rounded-full bg-brand-600 text-white shadow-lg shadow-brand-600/30">
                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z"/></svg>
                    </span>
                    <span class="flex flex-col leading-tight">
                        <span class="text-[11px] font-medium text-slate-400">Have any questions?</span>
                        <span class="text-sm font-bold text-ink">{{ config('site.phone') }}</span>
                    </span>
                </a>
                <a href="{{ route('contact') }}" class="rounded-full bg-ink px-5 py-2.5 text-sm font-semibold text-white transition-transform hover:-translate-y-0.5 hover:bg-brand-700">Contact Us</a>
            </div>

            {{-- Mobile toggle --}}
            <button type="button" data-mobile-toggle class="grid h-11 w-11 place-items-center rounded-xl border border-slate-200 text-ink lg:hidden" aria-label="Open menu">
                <svg data-icon-open class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
                <svg data-icon-close class="hidden h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
            </button>
        </div>
    </div>

    {{-- Mobile menu --}}
    <div data-mobile-menu class="hidden border-b border-slate-100 bg-white lg:hidden">
        <nav class="container-x space-y-1 py-4" aria-label="Mobile">
            @foreach ($nav as $item)
                <a href="{{ route($item['route']) }}" class="block rounded-xl px-4 py-3 text-base font-medium {{ request()->routeIs($item['route']) ? 'bg-brand-50 text-brand-700' : 'text-slate-700 hover:bg-slate-50' }}">{{ $item['label'] }}</a>
            @endforeach
            <p class="px-4 pt-4 pb-1 text-xs font-semibold uppercase tracking-wider text-slate-400">Resources</p>
            @foreach ($resources as $r)
                <a href="{{ route($r['route']) }}" class="block rounded-xl px-4 py-3 text-base font-medium text-slate-700 hover:bg-slate-50">{{ $r['label'] }}</a>
            @endforeach
            <div class="flex flex-col gap-3 px-4 pt-4">
                <a href="tel:{{ config('site.phone_link') }}" class="flex items-center justify-center gap-2 rounded-full border border-slate-200 px-5 py-3 text-sm font-semibold text-ink">{{ config('site.phone') }}</a>
                <a href="{{ route('contact') }}" class="rounded-full bg-brand-600 px-5 py-3 text-center text-sm font-semibold text-white">Contact Us</a>
            </div>
        </nav>
    </div>
</header>
