@php
    $showBanner = isset($showBanner) ? $showBanner : !request()->cookie('region_banner_dismissed');
    $locale = app()->getLocale();
    $languages = array_intersect_key(
        config('seo.languages', []),
        array_flip(config('markets.enabled', ['en', 'us', 'pt', 'br', 'es', 'fr']))
    );
    $currentUrl = url()->current();
    $preferredLocale = $preferredLocale ?? null;
    $preferredName = $preferredLocale && isset($languages[$preferredLocale])
        ? ($languages[$preferredLocale]['native_name'] ?? $languages[$preferredLocale]['name'] ?? $preferredLocale)
        : '';
    $messageLocale = $locale;
    $bannerMessage = $preferredName
        ? \Illuminate\Support\Facades\Lang::get('messages.region_banner.description_contextual', ['language' => $preferredName], $messageLocale)
        : \Illuminate\Support\Facades\Lang::get('messages.region_banner.description', [], $messageLocale);
    $selectedLocale = $preferredLocale && isset($languages[$preferredLocale]) ? $preferredLocale : $locale;
    $bannerAriaLabel = \Illuminate\Support\Facades\Lang::get('messages.region_banner.aria_label', [], $messageLocale);
    $bannerContinue = \Illuminate\Support\Facades\Lang::get('messages.region_banner.continue_contextual', [], $messageLocale);
    if ($bannerContinue === 'messages.region_banner.continue_contextual') {
        $bannerContinue = \Illuminate\Support\Facades\Lang::get('messages.region_banner.continue', [], $messageLocale);
    }
    $bannerDismiss = \Illuminate\Support\Facades\Lang::get('messages.region_banner.dismiss', [], $messageLocale);
@endphp
@if($showBanner)
<div id="region-banner" class="region-banner-bar bg-neutral-100 border-b border-neutral-200" role="region" aria-label="{{ $bannerAriaLabel }}">
    <div class="relative site-container py-2.5 sm:py-2 pr-12 sm:pr-6 flex flex-col sm:flex-row sm:flex-nowrap sm:items-center sm:justify-between gap-2 sm:gap-4 min-h-[2.75rem]">
        <p class="text-xs sm:text-sm text-neutral-600 leading-snug sm:truncate w-full sm:flex-1 sm:min-w-0">
            {{ $bannerMessage }}
        </p>
        <form id="region-banner-form" class="grid grid-cols-[minmax(0,1fr)_auto] sm:flex sm:flex-nowrap items-center gap-2 sm:gap-3 w-full sm:w-auto sm:flex-shrink-0" role="group" aria-label="{{ $bannerAriaLabel }}">
            @csrf
            <label for="region-banner-select" class="sr-only">{{ \Illuminate\Support\Facades\Lang::get('messages.nav.select_language', [], $messageLocale) }}</label>
            <div class="relative">
                <select id="region-banner-select"
                        name="locale"
                        class="appearance-none bg-white border border-neutral-200 rounded-lg pl-3 pr-9 py-2.5 text-sm font-medium text-neutral-900 w-full min-w-0 sm:min-w-[180px] cursor-pointer hover:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-criazo-primary focus:border-transparent"
>
                    @foreach($languages as $loc => $data)
                        <option value="{{ $loc }}" {{ $selectedLocale === $loc ? 'selected' : '' }} data-flag="{{ $data['flag'] ?? '' }}">
                            {{ $data['flag'] ?? '' }} {{ $data['native_name'] ?? $data['name'] ?? $loc }}
                        </option>
                    @endforeach
                </select>
                <span class="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-neutral-400" aria-hidden="true">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                </span>
            </div>
            <input type="hidden" name="current_url" value="{{ $currentUrl }}">
            <button type="submit"
                    class="px-3 sm:px-4 py-2.5 bg-neutral-900 text-white text-xs sm:text-sm font-semibold rounded-lg hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-criazo-primary focus:ring-offset-2 transition-colors whitespace-nowrap">
                {{ $bannerContinue }}
            </button>
        </form>
        <button type="button"
                id="region-banner-dismiss"
                class="absolute right-2 top-2 sm:static p-1.5 sm:p-2 rounded-lg text-neutral-500 hover:text-neutral-700 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-criazo-primary flex-shrink-0"
                aria-label="{{ $bannerDismiss }}">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>
    </div>
</div>
<script>
(function() {
    var banner = document.getElementById('region-banner');
    if (!banner) return;
    var form = document.getElementById('region-banner-form');
    var dismissBtn = document.getElementById('region-banner-dismiss');
    var select = document.getElementById('region-banner-select');
    var currentUrl = '{{ $currentUrl }}';
    var basePath = '{{ url('/language') }}';

    function setDismissCookie() {
        document.cookie = 'region_banner_dismissed=1; path=/; max-age=' + (60 * 60 * 24 * 365) + '; SameSite=Lax';
    }

    function clearBannerOffset() {
        document.documentElement.style.removeProperty('--region-banner-h');
    }

    function syncBannerOffset() {
        if (!banner || !banner.isConnected) {
            clearBannerOffset();
            return;
        }
        var h = Math.ceil(banner.getBoundingClientRect().height);
        if (h <= 0) {
            return;
        }
        document.documentElement.style.setProperty('--region-banner-h', h + 'px');
    }

    function hideBanner() {
        banner.remove();
        clearBannerOffset();
    }

    syncBannerOffset();
    requestAnimationFrame(function () {
        syncBannerOffset();
        requestAnimationFrame(syncBannerOffset);
    });
    if (typeof ResizeObserver !== 'undefined') {
        new ResizeObserver(syncBannerOffset).observe(banner);
    } else {
        window.addEventListener('resize', syncBannerOffset);
    }

    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            var locale = select ? select.value : 'en';
            if (!locale) return;
            var url = basePath + '/' + encodeURIComponent(locale) + '?current_url=' + encodeURIComponent(currentUrl);
            window.location.href = url;
        });
    }

    if (dismissBtn) {
        dismissBtn.addEventListener('click', function() {
            setDismissCookie();
            hideBanner();
            document.body.classList.remove('has-region-banner');
        });
    }
})();
</script>
<style>
.region-banner-bar {
    position: fixed;
    top: var(--dn-nav-stack-bottom, calc(var(--dn-top, 8px) + var(--dn-pill-h, 50px)));
    left: 0;
    right: 0;
    z-index: calc(var(--dn-z, 200) - 2);
    min-height: 2.75rem;
    padding-top: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}
</style>
@endif