{{--
    Switches the page's language while staying on the same page.

    Each option is a real link to the same content under the other locale's
    prefix, so the control is crawlable, shareable and works without JavaScript
    — a <button> that posts a session change would do none of those.

    @param string $linkClass  colour/typography for the trigger
--}}
@php
    $linkClass = $linkClass ?? 'text-white/85 hover:text-white';
    $current = in_array(app()->getLocale(), website_locales(), true) ? app()->getLocale() : website_locales()[0];
    $names = ['ar' => 'العربية', 'en' => 'English'];
@endphp

{{-- Same forgiving-hover contract as the nav dropdowns: a delayed, cancellable
     close and a panel flush against its trigger, so the pointer can reach it. --}}
<div class="relative"
     x-data="{
        open: false,
        closeTimer: null,
        show() { clearTimeout(this.closeTimer); this.open = true; },
        hide() { this.closeTimer = setTimeout(() => this.open = false, 220); },
     }"
     x-on:mouseenter="show()"
     x-on:mouseleave="hide()"
     x-on:focusout="if (! $el.contains($event.relatedTarget)) open = false">
    <button type="button"
            x-on:click="open ? open = false : show()" x-on:mouseenter="show()"
            x-bind:aria-expanded="open ? 'true' : 'false'"
            class="ec-nav-item inline-flex items-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium transition {{ $linkClass }}"
            aria-label="{{ __('تغيير اللغة') }}">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M21 12a9 9 0 11-18 0 9 9 0 0118 0zM3.6 9h16.8M3.6 15h16.8M12 3a15 15 0 010 18M12 3a15 15 0 000 18"/>
        </svg>
        <span class="relative z-10">{{ $names[$current] ?? $current }}</span>
        <svg class="w-3.5 h-3.5 transition-transform" x-bind:class="open && 'rotate-180'"
             fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
    </button>

    <div x-show="open" x-cloak x-transition.opacity
         x-on:keydown.escape.window="open = false"
         x-on:mouseenter="show()" x-on:mouseleave="hide()"
         class="absolute z-50 top-full end-0 min-w-40 pt-2">
    <ul class="ec-nav-dropdown rounded-xl p-2 shadow-xl">
        @foreach (website_locales() as $loc)
            <li>
                <a href="{{ website_current_url_in($loc) }}" hreflang="{{ $loc }}"
                   @if ($loc === $current) aria-current="true" @endif
                   class="flex items-center justify-between gap-3 rounded-lg px-3 py-2 text-sm transition hover:bg-white/10
                          {{ $loc === $current ? 'font-semibold' : '' }}">
                    <span>{{ $names[$loc] ?? $loc }}</span>
                    @if ($loc === $current)
                        <svg class="w-4 h-4 ec-accent-text" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                    @endif
                </a>
            </li>
        @endforeach
    </ul>
    </div>
</div>
