<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Account Banned</title>
    <link rel="icon" type="image/png" href="{{ asset('images/logo.webp') }}">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white font-sans antialiased">

<div class="min-h-screen flex flex-col justify-center items-center py-12 px-6 sm:px-8">
    <div class="text-center max-w-xl">
        <!-- Circular Cross Ban Icon -->
        <svg class="w-20 h-20 text-red-500 dark:text-red-500 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 6l12 12M18 6L6 18"/>
        </svg>

        <h1 class="mt-6 text-lg font-bold text-red-400 dark:text-red-400">Account Access Restricted</h1>
        <p class="mt-4 text-md text-gray-700 dark:text-gray-300">
            We regret to inform you that your account has been temporarily banned due to potential abuse detected by our system.
        </p>

        <div class="mt-6 space-y-4">
            <p class="text-md text-gray-600 dark:text-gray-300">
                If you believe this is a mistake, please reach out to us for assistance.
            </p>

            <flux:button as="a" href="mailto:contact@zemail.me">
                Contact Support
            </flux:button>


            <p class="text-sm text-gray-500 dark:text-gray-400">
                Or email us at <a href="mailto:contact@zemail.me" class="underline text-blue-500">contact@zemail.me</a>
            </p>
        </div>
    </div>
</div>

</body>
</html>
