@php
    $navItems = [
        ['label' => 'Home', 'href' => '/', 'active' => request()->is('/')],
        ['label' => 'About Us', 'href' => '/about', 'active' => request()->is('about')],
        ['label' => 'Services', 'href' => '/services', 'active' => request()->is('services')],
        ['label' => 'Pricing', 'href' => '/pricing', 'active' => request()->is('pricing')],
        ['label' => 'Booking', 'href' => '/booking', 'active' => request()->is('booking')],
        ['label' => 'Contact', 'href' => '/contact', 'active' => request()->is('contact')],
    ];
@endphp

<header x-data="{ open: false }" class="sticky top-0 z-50 border-b border-slate-200 bg-white/95 backdrop-blur">
    <div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
        <a href="/" class="flex items-center gap-2" aria-label="Tumaini Cyber home">
            <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-[#087db3] to-[#0a4aa0] text-white shadow">
                <span class="text-lg font-black">T</span>
            </span>
            <span class="leading-tight">
                <span class="block text-base font-extrabold tracking-tight text-[#0c2a5a]">Tumaini Cyber</span>
                <span class="block text-[10px] font-medium uppercase tracking-widest text-[#e52a36]">Perfect Prints Guaranteed</span>
            </span>
        </a>

        <nav class="hidden items-center gap-7 lg:flex">
            @foreach ($navItems as $item)
                <a href="{{ $item['href'] }}"
                    class="relative py-6 text-sm font-medium transition {{ $item['active'] ? 'text-[#e52a36]' : 'text-slate-700 hover:text-[#087db3]' }}">
                    {{ $item['label'] }}
                    @if ($item['active'])
                        <span class="absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-[#e52a36]"></span>
                    @endif
                </a>
            @endforeach
        </nav>

        <div class="hidden items-center gap-3 lg:flex">
            <a href="/booking"
                class="rounded-lg bg-[#e52a36] px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-[#c81f2b]">
                Book a Service
            </a>
        </div>

        <button type="button" @click="open = !open" class="inline-flex items-center justify-center rounded-md p-2 text-slate-700 lg:hidden"
            aria-label="Toggle menu" :aria-expanded="open">
            <x-icon name="{{ 'menu' }}" x-show="!open" class="h-6 w-6" />
            <x-icon name="close" x-show="open" x-cloak class="h-6 w-6" />
        </button>
    </div>

    <div x-show="open" x-cloak x-collapse class="border-t border-slate-100 bg-white lg:hidden">
        <nav class="space-y-1 px-4 py-3">
            @foreach ($navItems as $item)
                <a href="{{ $item['href'] }}"
                    class="block rounded-lg px-3 py-2.5 text-base font-medium {{ $item['active'] ? 'bg-red-50 text-[#e52a36]' : 'text-slate-700 hover:bg-slate-50' }}">
                    {{ $item['label'] }}
                </a>
            @endforeach
            <a href="/booking"
                class="mt-2 block rounded-lg bg-[#e52a36] px-3 py-2.5 text-center text-base font-semibold text-white">
                Book a Service
            </a>
        </nav>
    </div>
</header>