@php
    $user = auth()->user();
    $isDemo = false;
    if ($user) {
        $email = strtolower($user->email);
        $isDemo = $user->hasRole('demo') || $email === 'demo@example.com' || $email === 'demo@exemple.com';
    }
@endphp

@if($isDemo)
    <div x-data="{ 
            showError: {{ session('error') ? 'true' : 'false' }},
            errorMessage: '{{ session('error') }}'
         }"
         x-init="if(showError) { setTimeout(() => showError = false, 7000) }"
         class="fixed inset-0 z-[999999] pointer-events-none flex flex-col items-center">
        
        {{-- Slim Top Info Strip --}}
        <div class="w-full bg-[#0B0F19]/80 backdrop-blur-md py-1 px-4 border-b border-amber-500/20 flex justify-center items-center gap-4 pointer-events-auto">
            <span class="flex h-2 w-2 relative">
                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
                <span class="relative inline-flex rounded-full h-2 w-2 bg-amber-500"></span>
            </span>
            <p class="text-[9px] font-black uppercase tracking-[0.4em] text-amber-500/80">Demo Matrix Active</p>
        </div>

        {{-- Centered Neon Pop Alert --}}
        <div class="mt-20 px-4 w-full max-w-lg">
            <template x-if="showError">
                <div x-transition:enter="transition cubic-bezier(0.34, 1.56, 0.64, 1) duration-600"
                     x-transition:enter-start="opacity-0 -translate-y-24 scale-50 rotate-3"
                     x-transition:enter-end="opacity-100 translate-y-0 scale-100 rotate-0"
                     x-transition:leave="transition ease-in duration-300"
                     x-transition:leave-start="opacity-100 scale-100"
                     x-transition:leave-end="opacity-0 translate-y-4 scale-90"
                     class="relative group pointer-events-auto">
                    
                    {{-- Animated Glow Layer --}}
                    <div class="absolute -inset-1 bg-gradient-to-r from-red-600 to-rose-600 rounded-2xl blur opacity-40 group-hover:opacity-75 transition duration-1000 group-hover:duration-200 animate-pulse"></div>
                    
                    <div class="relative bg-[#0F0505] border-2 border-red-500/50 text-white p-5 rounded-2xl shadow-[0_0_50px_rgba(220,38,38,0.3)] flex items-center gap-5 overflow-hidden">
                        {{-- Background Pattern --}}
                        <div class="absolute inset-0 opacity-5 pointer-events-none">
                            <svg width="100%" height="100%"><rect width="100%" height="100%" fill="url(#grid-alert)" /></svg>
                            <defs><pattern id="grid-alert" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="white" stroke-width="0.5"/></pattern></defs>
                        </div>

                        <div class="w-12 h-12 rounded-xl bg-red-600 flex items-center justify-center shrink-0 shadow-[0_0_20px_rgba(220,38,38,0.5)]">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                            </svg>
                        </div>

                        <div class="flex flex-col flex-1">
                            <h4 class="text-[11px] font-black uppercase tracking-[0.3em] text-red-500 mb-1">Access Revoked</h4>
                            <p class="text-sm font-bold text-white leading-tight" x-text="errorMessage"></p>
                        </div>

                        <button @click="showError = false" class="p-2 hover:bg-white/5 rounded-xl transition-all active:scale-90">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white/30 hover:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                </div>
            </template>
        </div>
    </div>
@endif