@php
    $error = session('error') ?? request('error');
    $success = session('success') ?? request('success');
@endphp

@if ($success || $error)
    <div id="landing-alert" class="fixed top-24 left-1/2 -translate-x-1/2 z-[9999] w-full max-w-md px-4 animate-bounce-in">
        @if ($success)
            <div
                class="bg-emerald-500/90 backdrop-blur-md text-white px-6 py-4 rounded-3xl shadow-2xl flex items-center justify-between gap-4 border border-emerald-400/20">
                <div class="flex items-center gap-3">
                    <i class="fas fa-check-circle text-xl"></i>
                    <p class="text-sm font-bold tracking-tight">{{ $success }}</p>
                </div>
                <button onclick="document.getElementById('landing-alert').remove()" class="text-white/60 hover:text-white">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        @endif
        @if ($error)
            <div
                class="bg-rose-500/90 backdrop-blur-md text-white px-6 py-4 rounded-3xl shadow-2xl flex items-center justify-between gap-4 border border-rose-400/20">
                <div class="flex items-center gap-3 text-center w-full justify-center">
                    <i class="fas fa-exclamation-circle text-xl"></i>
                    <p class="text-sm font-bold tracking-tight">{{ $error }}</p>
                </div>
                <button onclick="document.getElementById('landing-alert').remove()" class="text-white/60 hover:text-white">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        @endif
    </div>
    <script>
        setTimeout(() => {
            const alert = document.getElementById('landing-alert');
            if (alert) {
                alert.style.transition = 'opacity 0.5s ease';
                alert.style.opacity = '0';
                setTimeout(() => alert.remove(), 500);
            }
        }, 6000);
    </script>
    <style>
        @keyframes bounce-in {
            0% {
                transform: translate(-50%, -100%) scale(0.9);
                opacity: 0;
            }

            70% {
                transform: translate(-50%, 10%) scale(1.05);
                opacity: 1;
            }

            100% {
                transform: translate(-50%, 0) scale(1);
                opacity: 1;
            }
        }

        .animate-bounce-in {
            animation: bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }
    </style>
@endif