@php
    $locale = app()->getLocale();
    $isRtl = $locale === 'ar';
    $altLocale = $locale === 'ar' ? 'en' : 'ar';
    $altLabel = $locale === 'ar' ? 'EN' : 'ع';

    $serviceCategories = \App\Models\ServiceCategory::active()
        ->orderBy('sort_order')
        ->with(['services' => fn($q) => $q->active()->orderBy('sort_order')->limit(8)])
        ->get();
@endphp

<header class="bg-white/95 backdrop-blur-sm sticky top-0 z-40 border-b border-border/70 shadow-soft">
    <div class="container-wide flex items-center justify-between py-3 gap-4">
        {{-- Logo --}}
        <a href="{{ route('home') }}" class="flex items-center gap-3 shrink-0" aria-label="ZLHOST">
            <span class="inline-flex items-center justify-center w-11 h-11 rounded-xl bg-green-fade text-white font-black text-lg shadow-soft">Z</span>
            <span class="hidden sm:block">
                <span class="block font-extrabold text-navy-900 leading-tight">ZLHOST</span>
                <span class="block text-[11px] font-semibold text-brand-600 leading-tight">استضافة بلا حدود</span>
            </span>
        </a>

        {{-- Desktop Nav --}}
        <nav class="hidden lg:flex items-center gap-1" x-data="{ open: null }">
            <a href="{{ route('home') }}" class="nav-link {{ request()->routeIs('home') ? 'nav-link-active' : '' }}">الرئيسية</a>

            {{-- Mega menu: Services --}}
            <div class="relative" @mouseenter="open='services'" @mouseleave="open=null">
                <button class="nav-link {{ request()->routeIs('services.*') ? 'nav-link-active' : '' }}" type="button">
                    خدماتنا
                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-width="2.2" d="M6 9l6 6 6-6"/></svg>
                </button>
                <div x-show="open==='services'" x-cloak x-transition
                     class="absolute top-full mt-2 {{ $isRtl ? 'right-0' : 'left-0' }} w-[640px] bg-white rounded-2xl shadow-cardHover border border-border p-6 grid grid-cols-2 gap-4">
                    @forelse($serviceCategories as $category)
                        <div>
                            <a href="{{ route('services.index') }}#cat-{{ $category->slug }}" class="font-bold text-brand-700 mb-2 inline-block">{{ $category->name }}</a>
                            <ul class="space-y-1">
                                @foreach($category->services as $svc)
                                    <li>
                                        <a href="{{ route('services.show', $svc->slug) }}" class="text-sm text-navy-700 hover:text-brand-700 block py-1">
                                            {{ $svc->name }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @empty
                        <div class="col-span-2 text-sm text-navy-500">قريبًا — جاري إعداد كتالوج الخدمات.</div>
                    @endforelse
                </div>
            </div>

            <a href="{{ route('pricing.index') }}" class="nav-link {{ request()->routeIs('pricing.*') ? 'nav-link-active' : '' }}">الباقات</a>
            <a href="{{ route('portfolio.index') }}" class="nav-link {{ request()->routeIs('portfolio.*') ? 'nav-link-active' : '' }}">أعمالنا</a>
            <a href="{{ route('blog.index') }}" class="nav-link {{ request()->routeIs('blog.*') ? 'nav-link-active' : '' }}">المدونة</a>
            <a href="{{ route('about') }}" class="nav-link {{ request()->routeIs('about') ? 'nav-link-active' : '' }}">من نحن</a>
            <a href="{{ route('contact') }}" class="nav-link {{ request()->routeIs('contact') ? 'nav-link-active' : '' }}">تواصل</a>
        </nav>

        {{-- Right cluster --}}
        <div class="flex items-center gap-2">
            <a href="{{ route('locale.switch', $altLocale) }}" class="btn btn-ghost btn-sm" title="Switch language">{{ $altLabel }}</a>

            @auth
                @if(auth()->user()->hasRole('customer'))
                    <a href="{{ route('customer.dashboard') }}" class="btn btn-outline btn-sm hidden sm:inline-flex">لوحة التحكم</a>
                @else
                    <a href="/admin" class="btn btn-outline btn-sm hidden sm:inline-flex">لوحة الإدارة</a>
                @endif
            @else
                <a href="{{ route('login') }}" class="btn btn-ghost btn-sm hidden sm:inline-flex">دخول</a>
                <a href="{{ route('register') }}" class="btn btn-primary btn-sm hidden md:inline-flex">حسابي</a>
            @endauth

            <a href="{{ route('quote.show') }}" class="btn btn-gold btn-sm hidden md:inline-flex">اطلب عرض سعر</a>

            {{-- Mobile menu --}}
            <button x-data x-on:click="$dispatch('open-mobile-menu')" class="lg:hidden btn btn-ghost btn-sm" aria-label="Menu">
                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-width="2.2" d="M4 6h16M4 12h16M4 18h16"/></svg>
            </button>
        </div>
    </div>

    {{-- Mobile menu --}}
    <div x-data="{ show: false }" x-on:open-mobile-menu.window="show = !show" x-show="show" x-cloak x-transition
         class="lg:hidden bg-white border-t border-border">
        <nav class="container-wide py-4 grid gap-1">
            <a href="{{ route('home') }}" class="nav-link">الرئيسية</a>
            <a href="{{ route('services.index') }}" class="nav-link">خدماتنا</a>
            <a href="{{ route('pricing.index') }}" class="nav-link">الباقات</a>
            <a href="{{ route('portfolio.index') }}" class="nav-link">أعمالنا</a>
            <a href="{{ route('blog.index') }}" class="nav-link">المدونة</a>
            <a href="{{ route('about') }}" class="nav-link">من نحن</a>
            <a href="{{ route('contact') }}" class="nav-link">تواصل</a>
            <a href="{{ route('quote.show') }}" class="btn btn-gold btn-sm mt-2">اطلب عرض سعر</a>
            @auth
                @if(auth()->user()->hasRole('customer'))
                    <a href="{{ route('customer.dashboard') }}" class="btn btn-outline btn-sm mt-1">لوحة التحكم</a>
                @endif
            @else
                <div class="grid grid-cols-2 gap-2 mt-2">
                    <a href="{{ route('login') }}" class="btn btn-outline btn-sm">دخول</a>
                    <a href="{{ route('register') }}" class="btn btn-primary btn-sm">حسابي</a>
                </div>
            @endauth
        </nav>
    </div>
</header>