@php
    $routeName = Route::currentRouteName();
    $baseParams = $routeName && Route::current()
        ? collect(Route::current()->parameters())->except('locale')->all()
        : [];
    $supportedLocales = site_supported_locales();
    $routes = [];

    if ($routeName) {
        foreach ($supportedLocales as $locale) {
            $routes[$locale] = site_locale_route($routeName, $locale, $baseParams);
        }
    }

    $labels = collect($supportedLocales)
        ->mapWithKeys(fn (string $locale) => [$locale => site_locale_label($locale)])
        ->all();

    $hasStoredPreference = request()->hasCookie((string) config('site.locale_preference_cookie', 'site_locale_preference'))
        || session()->has('site_locale');
    $geoSuggestedLocale = $hasStoredPreference ? null : resolve_site_locale_from_geo(request());
@endphp

@if ($routeName)
    <div
        x-data="siteLocalePreference({
            currentLocale: @js(app()->getLocale()),
            hasStoredPreference: @js($hasStoredPreference),
            suggestedLocale: @js($geoSuggestedLocale),
            routes: @js($routes),
            labels: @js($labels),
        })"
        x-cloak
        x-show="open"
        class="fixed inset-x-0 top-20 z-[65] px-3 sm:px-4"
        role="status"
        aria-live="polite"
    >
        <div class="mx-auto max-w-xl rounded-2xl border border-blue-200 bg-white/95 p-4 shadow-2xl ring-1 ring-blue-100 backdrop-blur">
            <div class="flex items-start gap-3 align-middle">
                <div class="mt-0.5 rounded-full bg-blue-50 p-2 text-blue-600" aria-hidden="true">
                    <x-site.svg-icon name="notification" class="h-6 w-6" />
                </div>

                <div class="min-w-0 flex-1">
                    <p class="text-sm font-semibold ">{{ __('site.locale_suggestion_title') }}</p>
                    <p class="mt-1 text-sm text-brand-muted">
                        {{ __('site.locale_suggestion_body') }}
                        <span class="font-semibold " x-text="suggestionLabel()"></span>
                    </p>

                    <div class="mt-3 flex flex-wrap gap-2">
                        <button
                            type="button"
                            class="inline-flex items-center rounded-xl bg-blue-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-blue-700"
                            @click="accept()"
                        >
                            {{ __('site.locale_suggestion_accept') }}
                        </button>
                        <button
                            type="button"
                            class="inline-flex items-center rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold  transition hover:bg-slate-50"
                            @click="dismiss()"
                        >
                            {{ __('site.locale_suggestion_dismiss') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif