@php
    $intake = \App\Models\Intake::current();

    $navigation = [
        ['label' => 'About', 'url' => route('pages.show', 'about')],
        ['label' => 'Academics', 'url' => route('schools.index')],
        ['label' => 'Admissions', 'url' => route('admissions')],
        ['label' => 'Research', 'url' => route('pages.show', 'research')],
        ['label' => 'Student Life', 'url' => route('pages.show', 'student-life')],
        ['label' => 'News', 'url' => route('news.index')],
        ['label' => 'Contact', 'url' => route('contact')],
    ];
@endphp

<div x-data="{ open: false }" @keydown.escape.window="open = false">

    {{-- Utility strip: contact details and portal links --}}
    <div class="hidden bg-brand-900 text-white lg:block">
        <div class="container-page flex items-center justify-between py-2 text-xs">
            <div class="flex items-center gap-5">
                <a href="tel:{{ preg_replace('/\s+/', '', setting('university_phone')) }}" class="flex items-center gap-1.5 opacity-90 transition hover:opacity-100">
                    <svg class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M2 3a1 1 0 0 1 1-1h2.2a1 1 0 0 1 1 .8l.7 3.3a1 1 0 0 1-.5 1.1l-1.5.8a11 11 0 0 0 5.1 5.1l.8-1.5a1 1 0 0 1 1.1-.5l3.3.7a1 1 0 0 1 .8 1V17a1 1 0 0 1-1 1h-1C7.8 18 2 12.2 2 5V3Z"/></svg>
                    {{ setting('university_phone') }}
                </a>
                <a href="mailto:{{ setting('university_email') }}" class="flex items-center gap-1.5 opacity-90 transition hover:opacity-100">
                    <svg class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 4h14a1 1 0 0 1 1 1v.4l-8 4.4-8-4.4V5a1 1 0 0 1 1-1Zm-1 3.7V15a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7.7l-7.5 4.2a1 1 0 0 1-1 0L2 7.7Z"/></svg>
                    {{ setting('university_email') }}
                </a>
                <span class="flex items-center gap-1.5 opacity-75">
                    <svg class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M10 18s6-5.2 6-9.3A6 6 0 0 0 4 8.7C4 12.8 10 18 10 18Zm0-7.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"/></svg>
                    {{ setting('university_address') }}
                </span>
            </div>

            <div class="flex items-center gap-4">
                <a href="{{ route('news.index') }}" class="opacity-90 transition hover:opacity-100">News</a>
                <span class="text-white/30" aria-hidden="true">|</span>
                <a href="{{ route('events.index') }}" class="opacity-90 transition hover:opacity-100">Events</a>
                <span class="text-white/30" aria-hidden="true">|</span>
                @auth
                    <a href="{{ auth()->user()->isStaff() ? route('admin.dashboard') : route('applicant.dashboard') }}"
                       class="font-medium text-gold-300 transition hover:text-gold-200">My Portal</a>
                @else
                    <a href="{{ route('login') }}" class="font-medium text-gold-300 transition hover:text-gold-200">Applicant Login</a>
                @endauth
            </div>
        </div>
    </div>

    {{-- Main navigation --}}
    <header class="sticky top-0 z-40 border-b border-slate-200 bg-white/95 backdrop-blur">
        <div class="container-page flex h-18 items-center justify-between gap-4 py-3">

            <a href="{{ route('home') }}" class="flex shrink-0 items-center gap-3" aria-label="{{ setting('university_name') }} home">
                <img src="{{ asset('images/kcu-logo.png') }}"
                     alt="{{ setting('university_name') }}"
                     class="h-10 w-auto sm:h-12"
                     width="900" height="338">
            </a>

            <nav class="hidden items-center gap-1 xl:flex" aria-label="Main">
                @foreach ($navigation as $item)
                    <a href="{{ $item['url'] }}"
                       @class([
                           'rounded-lg px-3 py-2 text-sm font-medium transition',
                           'text-brand-800 bg-brand-50' => request()->fullUrlIs($item['url'].'*'),
                           'text-slate-700 hover:text-brand-800 hover:bg-slate-50' => ! request()->fullUrlIs($item['url'].'*'),
                       ])>{{ $item['label'] }}</a>
                @endforeach
            </nav>

            <div class="flex items-center gap-3">
                <x-button :href="route('programmes.index')" variant="outline" size="sm" class="hidden md:inline-flex">
                    Programmes
                </x-button>

                <x-button :href="route('apply')" size="sm" class="hidden sm:inline-flex">
                    Apply Now
                </x-button>

                <button type="button"
                        @click="open = !open"
                        class="rounded-lg p-2 text-slate-700 transition hover:bg-slate-100 xl:hidden"
                        :aria-expanded="open"
                        aria-controls="mobile-menu"
                        aria-label="Toggle navigation menu">
                    <svg x-show="!open" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" d="M4 7h16M4 12h16M4 17h16"/>
                    </svg>
                    <svg x-show="open" x-cloak class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" d="M6 6l12 12M18 6 6 18"/>
                    </svg>
                </button>
            </div>
        </div>

        {{-- Mobile menu (PRD 7) --}}
        <div id="mobile-menu"
             x-show="open"
             x-cloak
             x-transition.origin.top
             class="border-t border-slate-200 bg-white xl:hidden">
            <nav class="container-page py-4" aria-label="Mobile">
                <p class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wider text-slate-400">Menu</p>
                <ul class="divide-y divide-slate-100">
                    @foreach ($navigation as $item)
                        <li>
                            <a href="{{ $item['url'] }}" class="flex items-center justify-between py-3 text-base font-medium text-slate-800">
                                {{ $item['label'] }}
                                <svg class="h-4 w-4 text-slate-300" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M7.3 14.7a1 1 0 0 1 0-1.4L10.6 10 7.3 6.7a1 1 0 0 1 1.4-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.4 0Z" clip-rule="evenodd"/>
                                </svg>
                            </a>
                        </li>
                    @endforeach
                    <li>
                        <a href="{{ route('programmes.index') }}" class="flex items-center justify-between py-3 text-base font-medium text-slate-800">
                            Programmes
                        </a>
                    </li>
                </ul>

                <div class="mt-4 space-y-2">
                    <x-button :href="route('apply')" class="w-full" size="lg">Apply Now</x-button>
                    @auth
                        <x-button :href="auth()->user()->isStaff() ? route('admin.dashboard') : route('applicant.dashboard')" variant="outline" class="w-full">My Portal</x-button>
                    @else
                        <x-button :href="route('login')" variant="outline" class="w-full">Applicant Login</x-button>
                    @endauth
                </div>
            </nav>
        </div>
    </header>

    {{-- Intake banner --}}
    @if ($intake?->isAcceptingApplications())
        <div class="bg-gold-300 text-brand-900">
            <div class="container-page flex flex-wrap items-center justify-center gap-x-3 gap-y-1 py-2 text-center text-sm">
                <span class="font-semibold">Applications open —</span>
                <span>{{ $intake->name }}</span>
                @if ($intake->application_close_at)
                    <span class="hidden opacity-70 sm:inline" aria-hidden="true">•</span>
                    <span class="opacity-80">Closes {{ $intake->deadlineLabel() }}</span>
                @endif
                <a href="{{ route('apply') }}" class="font-semibold underline underline-offset-2 hover:no-underline">Apply now</a>
            </div>
        </div>
    @endif
</div>
