@php
    $isAr = app()->getLocale() === 'ar';
    $links = [
        ['key' => 'home', 'href' => route('home'), 'label' => __('site.nav_home'), 'current' => request()->routeIs('home')],
        ['key' => 'about', 'href' => route('about'), 'label' => __('site.nav_about'), 'current' => request()->routeIs('about')],
        ['key' => 'services', 'href' => route('home').'#services', 'label' => __('site.nav_services'), 'current' => false],
        ['key' => 'posts', 'href' => route('posts.index'), 'label' => __('site.nav_articles'), 'current' => request()->routeIs('posts*')],
        ['key' => 'booking', 'href' => route('booking'), 'label' => __('site.nav_booking'), 'current' => request()->routeIs('booking*')],
    ];
    $langHref = url('/language/'.($isAr ? 'en' : 'ar'));
    $langText = $isAr ? 'EN' : 'ع';
@endphp
<header
    x-data="{ mobileMenuOpen: false }"
    class="nav"
    id="site-nav"
    data-test="main-navigation"
>
    <div class="wrap">
        <a href="{{ route('home') }}" class="brand" aria-label="{{ __('site.brand_label') }}" wire:navigate>
            <span class="seal" style="background-image:url('{{ asset('images/logo.png') }}')"></span>
            <span>
                <b>{{ __('site.brand_name') }}</b>
                <small>{{ __('site.brand_sub') }}</small>
            </span>
        </a>

        <nav class="links" aria-label="{{ __('site.nav_main') }}">
            @foreach ($links as $link)
                <a
                    href="{{ $link['href'] }}"
                    @if ($link['current']) aria-current="page" @endif
                    wire:navigate
                    data-test="nav-{{ $link['key'] }}"
                >{{ $link['label'] }}</a>
            @endforeach
        </nav>

        <div class="nav-tools">
            <a class="lang" href="{{ $langHref }}" aria-label="{{ __('site.lang_switch') }}" data-test="nav-language">{{ $langText }}</a>

            @auth
                @php
                    $dashboardRoute = auth()->user()->isAdmin() ? route('admin.dashboard') : route('client.dashboard');
                @endphp
                <a class="login" href="{{ $dashboardRoute }}" wire:navigate data-test="nav-dashboard">{{ __('navigation.dashboard') }}</a>
                <form method="POST" action="{{ route('logout') }}" class="inline">
                    @csrf
                    <button type="submit" class="login" data-test="nav-logout">{{ __('navigation.logout') }}</button>
                </form>
            @else
                <a class="login" href="{{ route('login') }}" wire:navigate data-test="nav-login">{{ __('site.nav_login') }}</a>
            @endauth

            <a class="btn btn-gold" href="{{ route('home') }}#book">{{ __('site.nav_book') }}</a>

            <button
                type="button"
                class="menu-btn"
                @click="mobileMenuOpen = !mobileMenuOpen"
                :aria-expanded="mobileMenuOpen"
                aria-label="{{ __('site.nav_menu') }}"
                data-test="mobile-menu-button"
            >
                <svg x-show="!mobileMenuOpen" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
                <svg x-show="mobileMenuOpen" x-cloak class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
    </div>

    <!-- Mobile menu sheet -->
    <div
        x-show="mobileMenuOpen"
        x-trap.inert.noscroll="mobileMenuOpen"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 -translate-y-1"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 -translate-y-1"
        x-cloak
        @click.away="mobileMenuOpen = false"
        @keydown.escape.window="mobileMenuOpen = false"
        class="menu-sheet"
        role="dialog"
        aria-modal="true"
        aria-label="{{ __('site.nav_menu') }}"
        data-test="mobile-menu"
    >
        @foreach ($links as $link)
            <a
                href="{{ $link['href'] }}"
                @if ($link['current']) aria-current="page" @endif
                wire:navigate
                @click="mobileMenuOpen = false"
                data-test="mobile-nav-{{ $link['key'] }}"
            >{{ $link['label'] }}</a>
        @endforeach

        @auth
            <a href="{{ $dashboardRoute }}" wire:navigate @click="mobileMenuOpen = false" data-test="mobile-nav-dashboard">{{ __('navigation.dashboard') }}</a>
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" data-test="mobile-nav-logout">{{ __('navigation.logout') }}</button>
            </form>
        @else
            <a href="{{ route('login') }}" wire:navigate @click="mobileMenuOpen = false" data-test="mobile-nav-login">{{ __('site.nav_login') }}</a>
        @endauth

        <a class="btn btn-gold" href="{{ route('home') }}#book" @click="mobileMenuOpen = false">{{ __('site.nav_book') }}</a>
    </div>
</header>