@php
    $navUrl = function (array $item) {
        try {
            return route($item['route'], $item['params'] ?? []);
        } catch (\Throwable $e) {
            return url('/');
        }
    };

    $isActive = function (array $item) {
        try {
            return url()->current() === route($item['route'], $item['params'] ?? []);
        } catch (\Throwable $e) {
            return false;
        }
    };
@endphp

<div x-data="{ open: false }">
    {{-- Utility top bar --}}
    <div class="hidden border-b border-line bg-teal-50 text-muted lg:block">
        <div class="container-x flex h-10 items-center justify-between text-xs">
            <div class="flex items-center gap-2">
                <x-ui.icon name="heroicon-o-map-pin" class="h-3.5 w-3.5 text-teal-600" />
                <span>Dar es Salaam, Tanzania &middot; United Kingdom</span>
            </div>
            <div class="flex items-center gap-6">
                @if ($settings->email)
                    <a href="mailto:{{ $settings->email }}" class="inline-flex items-center gap-2 transition-colors hover:text-teal-700">
                        <x-ui.icon name="heroicon-o-envelope" class="h-3.5 w-3.5 text-teal-600" />
                        {{ $settings->email }}
                    </a>
                @endif
                @if ($settings->linkedin_url)
                    <a href="{{ $settings->linkedin_url }}" target="_blank" rel="noopener" class="inline-flex items-center gap-1.5 transition-colors hover:text-teal-700" aria-label="LinkedIn">
                        <x-ui.icon name="heroicon-o-arrow-top-right-on-square" class="h-3.5 w-3.5" /> LinkedIn
                    </a>
                @endif
            </div>
        </div>
    </div>

    {{-- Main bar --}}
    <header
        x-data="{ scrolled: false }"
        @scroll.window="scrolled = window.scrollY > 8"
        :class="scrolled ? 'shadow-card' : ''"
        class="sticky top-0 z-40 border-b border-line/80 bg-white/95 backdrop-blur transition-shadow supports-[backdrop-filter]:bg-white/85"
    >
        <div class="container-x">
            <div class="flex h-20 items-center justify-between gap-6">
                {{-- Logo --}}
                <a href="{{ route('home') }}" class="flex shrink-0 items-center gap-3" aria-label="{{ $settings->company_name }} — Home">
                    @if ($settings->logo)
                        <img src="{{ \Illuminate\Support\Facades\Storage::url($settings->logo) }}" alt="{{ $settings->company_name }}" class="h-11 w-auto">
                    @else
                        <span class="grid h-11 w-11 place-items-center rounded-xl bg-navy-900">
                            <svg viewBox="0 0 32 32" class="h-6 w-6" aria-hidden="true"><path d="M9 22V10h3l4 6 4-6h3v12h-3v-7l-4 6-4-6v7z" fill="#38b0b7"/></svg>
                        </span>
                        <span class="leading-tight">
                            <span class="block font-display text-lg font-bold tracking-tight text-navy-900">Medisafe</span>
                            <span class="block text-[0.62rem] font-semibold uppercase tracking-[0.22em] text-muted">Suppliers Limited</span>
                        </span>
                    @endif
                </a>

                {{-- Desktop nav --}}
                <nav class="hidden items-center xl:gap-1 lg:flex" aria-label="Primary">
                    @foreach ($navigation as $item)
                        @php $hasChildren = !empty($item['children']); $mega = !empty($item['mega']); @endphp
                        <div class="group relative">
                            <a
                                href="{{ $navUrl($item) }}"
                                @class([
                                    'inline-flex items-center gap-1 rounded-md px-3 py-2 text-[0.9rem] font-semibold transition-colors',
                                    'text-teal-700' => $isActive($item),
                                    'text-navy-800 hover:text-teal-700' => !$isActive($item),
                                ])
                            >
                                {{ $item['label'] }}
                                @if ($hasChildren)
                                    <svg class="h-3.5 w-3.5 text-muted transition-transform group-hover:rotate-180" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
                                @endif
                            </a>

                            @if ($hasChildren)
                                <div @class([
                                    'invisible absolute top-full z-50 translate-y-1 pt-3 opacity-0 transition-all duration-150 group-hover:visible group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:visible group-focus-within:translate-y-0 group-focus-within:opacity-100',
                                    'left-1/2 w-[40rem] -translate-x-1/2 group-hover:-translate-x-1/2 group-focus-within:-translate-x-1/2' => $mega,
                                    'left-0 min-w-[17rem]' => !$mega,
                                ])>
                                    <div class="overflow-hidden rounded-2xl border border-line bg-white p-3 shadow-soft">
                                        @if ($mega)
                                            <div class="grid grid-cols-2 gap-1">
                                                @foreach ($item['children'] as $child)
                                                    <a href="{{ $navUrl($child) }}" class="group/i flex items-start gap-3 rounded-xl p-3 transition-colors hover:bg-stone-50">
                                                        <span class="icon-tile mt-0.5 h-9 w-9 shrink-0 rounded-lg transition-colors group-hover/i:bg-teal-500 group-hover/i:text-white">
                                                            <x-ui.icon :name="$child['icon'] ?? 'heroicon-o-chevron-right'" class="h-5 w-5" />
                                                        </span>
                                                        <span>
                                                            <span class="block text-sm font-semibold text-navy-900 group-hover/i:text-teal-700">{{ $child['label'] }}</span>
                                                            @isset($child['desc'])<span class="mt-0.5 block text-xs leading-snug text-muted">{{ $child['desc'] }}</span>@endisset
                                                        </span>
                                                    </a>
                                                @endforeach
                                            </div>
                                        @else
                                            @foreach ($item['children'] as $child)
                                                <a href="{{ $navUrl($child) }}" class="group/i flex items-start gap-3 rounded-xl p-3 transition-colors hover:bg-stone-50">
                                                    @isset($child['icon'])
                                                        <span class="icon-tile mt-0.5 h-9 w-9 shrink-0 rounded-lg transition-colors group-hover/i:bg-teal-500 group-hover/i:text-white">
                                                            <x-ui.icon :name="$child['icon']" class="h-5 w-5" />
                                                        </span>
                                                    @endisset
                                                    <span>
                                                        <span class="block text-sm font-semibold text-navy-900 group-hover/i:text-teal-700">{{ $child['label'] }}</span>
                                                        @isset($child['desc'])<span class="mt-0.5 block text-xs leading-snug text-muted">{{ $child['desc'] }}</span>@endisset
                                                    </span>
                                                </a>
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </nav>

                <div class="hidden items-center gap-3 lg:flex">
                    <a href="{{ route('contact.show') }}" class="inline-flex items-center gap-2 rounded-full bg-teal-600 px-5 py-2.5 text-sm font-semibold text-white shadow-[0_10px_24px_-10px_rgba(31,87,196,0.7)] transition-all hover:-translate-y-0.5 hover:bg-teal-700">
                        Let’s Talk
                        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h9.69L9.72 5.53a.75.75 0 011.06-1.06l5 5a.75.75 0 010 1.06l-5 5a.75.75 0 11-1.06-1.06l3.72-3.72H3.75A.75.75 0 013 10z" clip-rule="evenodd"/></svg>
                    </a>
                </div>

                {{-- Mobile toggle --}}
                <button type="button" @click="open = !open" class="inline-flex h-11 w-11 items-center justify-center rounded-lg border border-line text-navy-900 lg:hidden" :aria-expanded="open.toString()" aria-label="Toggle menu">
                    <svg x-show="!open" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/></svg>
                    <svg x-show="open" x-cloak class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
                </button>
            </div>
        </div>

        {{-- Mobile panel --}}
        <div x-show="open" x-cloak class="border-t border-line bg-white lg:hidden">
            <nav class="container-x max-h-[75vh] space-y-1 overflow-y-auto py-4" aria-label="Mobile">
                @foreach ($navigation as $item)
                    <a href="{{ $navUrl($item) }}" class="block rounded-lg px-3 py-2.5 text-[0.95rem] font-semibold text-navy-900 hover:bg-stone-100">{{ $item['label'] }}</a>
                    @if (!empty($item['children']))
                        <div class="mb-1 ml-3 space-y-0.5 border-l border-line pl-3">
                            @foreach ($item['children'] as $child)
                                <a href="{{ $navUrl($child) }}" class="block rounded-lg px-3 py-2 text-sm text-muted hover:bg-stone-100 hover:text-teal-700">{{ $child['label'] }}</a>
                            @endforeach
                        </div>
                    @endif
                @endforeach
                <a href="{{ route('contact.show') }}" class="mt-3 inline-flex w-full items-center justify-center gap-2 rounded-full bg-teal-600 px-5 py-3 text-sm font-semibold text-white">Let’s Talk</a>
            </nav>
        </div>
    </header>
</div>