<x-layouts::auth variant="card">


    <div class=" text-center p-8 rounded-2xl animate-fade-in">

        <!-- Animated Icon -->
        <div class="flex justify-center mb-6">
            <div class="w-20 h-20 rounded-full bg-red-100 flex items-center justify-center animate-pulse">
                <svg xmlns="http://www.w3.org/2000/svg"
                     class="w-10 h-10 text-red-600"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor">
                    <path stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M12 9v2m0 4h.01M5.07 19h13.86c1.54 0 2.5-1.67 1.73-3L13.73 4c-.77-1.33-2.69-1.33-3.46 0L3.34 16c-.77 1.33.19 3 1.73 3z"/>
                </svg>
            </div>
        </div>

        <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">
            Account Suspended
        </h1>

        <p class="text-gray-600 dark:text-gray-300 mb-6">
            Your account has been temporarily suspended.  
            If you believe this is a mistake, please contact support.
        </p>

        <div class="space-y-3">
            <a href="{{ route('about.contact') }}"
               class="block w-full py-3 rounded-lg bg-red-600 text-white font-semibold hover:bg-red-700 transition">
                Contact Support
            </a>

            <a href="{{ route('home') }}"
               class="block w-full py-3 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition">
                Back to Home
            </a>
        </div>

    </div>

    <style>
        .animate-fade-in {
            animation: fadeIn 0.6s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>


</x-layouts::auth>
