{{-- Cookie Alert Component --}}
<div x-data="{
    show: false,
    init() {
        // Mostra l'alert solo se l'utente non ha già accettato i cookie
        if (!localStorage.getItem('cookiesAccepted')) {
            this.show = true;
        }
    },
    accept() {
        localStorage.setItem('cookiesAccepted', 'true');
        this.show = false;
    },
    decline() {
        // Solo chiudi senza salvare
        this.show = false;
    }
}" x-show="show" x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0"
    x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0"
    x-transition:leave-end="opacity-0 translate-y-4" style="display: none;"
    class="fixed bottom-0 left-0 right-0 z-50 p-4 md:p-6" role="alert" aria-live="polite">

    <div class="container mx-auto max-w-6xl">
        <div class="bg-white dark:bg-umami-dark rounded-2xl shadow-2xl border border-gray-200 dark:border-gray-700 p-6 md:p-8">
            <div class="flex flex-col md:flex-row items-start md:items-center gap-6">
                {{-- Icon --}}
                <div class="flex-shrink-0">
                    <div class="w-12 h-12 bg-umami-accent/10 rounded-xl flex items-center justify-center">
                        <svg class="w-6 h-6 text-umami-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
                        </svg>
                    </div>
                </div>

                {{-- Content --}}
                <div class="flex-1">
                    <h3 class="text-lg font-bold text-umami-dark dark:text-white mb-2">Cookie e Privacy</h3>
                    <p class="text-sm text-umami-text dark:text-gray-300 leading-relaxed">
                        Questo sito utilizza cookie tecnici e di terze parti per migliorare la tua esperienza di navigazione.
                        Proseguendo la navigazione accetti l'utilizzo dei cookie secondo quanto descritto nella nostra
                        <a href="{{ route('cookie', ['locale' => app()->getLocale()]) }}" class="text-umami-accent hover:underline font-medium">Cookie Policy</a>
                        e <a href="{{ route('privacy', ['locale' => app()->getLocale()]) }}" class="text-umami-accent hover:underline font-medium">Privacy Policy</a>.
                    </p>
                </div>

                {{-- Actions --}}
                <div class="flex flex-col sm:flex-row gap-3 w-full md:w-auto">
                    <button @click="decline" type="button"
                        class="px-6 py-2.5 text-sm font-medium text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 transition-colors rounded-lg border border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500">
                        Rifiuta
                    </button>
                    <button @click="accept" type="button"
                        class="px-6 py-2.5 text-sm font-medium text-white bg-umami-accent hover:bg-umami-accent/90 transition-colors rounded-lg shadow-sm whitespace-nowrap">
                        Accetta
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>