<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>429 - Too Many Requests - {{ $settings['site_name'] ?? config('app.name') }}</title>

    <!-- Favicon -->
    <link rel="icon" href="{{ $settings['site_favicon'] ?? '/favicon.ico' }}" sizes="any">
    <link rel="icon" href="{{ $settings['site_favicon'] ?? '/favicon.ico' }}" type="image/svg+xml">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=plus-jakarta-sans:400,500,600,700&display=swap" rel="stylesheet" />

    @fluxAppearance
    @livewireStyles
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="h-full bg-white dark:bg-zinc-900 font-sans antialiased">
    <!-- Background decorative elements -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
        <!-- Bottom-left teal circle -->
        <div class="absolute -bottom-32 -left-32 w-64 h-64 bg-red-500 rounded-full opacity-20 dark:opacity-10"></div>
        
        <!-- Top-right purple circle -->
        <div class="absolute -top-32 -right-32 w-64 h-64 bg-pink-600 rounded-full opacity-20 dark:opacity-10"></div>
        
        <!-- Chevron patterns -->
        <div class="absolute top-0 right-0 w-32 h-32 opacity-30 dark:opacity-20">
            <div class="grid grid-cols-4 gap-1 p-4">
                <div class="w-2 h-2 bg-red-400 rounded-sm transform rotate-45"></div>
                <div class="w-2 h-2 bg-red-400 rounded-sm transform rotate-45"></div>
                <div class="w-2 h-2 bg-red-400 rounded-sm transform rotate-45"></div>
                <div class="w-2 h-2 bg-red-400 rounded-sm transform rotate-45"></div>
                <div class="w-2 h-2 bg-red-400 rounded-sm transform rotate-45"></div>
                <div class="w-2 h-2 bg-red-400 rounded-sm transform rotate-45"></div>
                <div class="w-2 h-2 bg-red-400 rounded-sm transform rotate-45"></div>
                <div class="w-2 h-2 bg-red-400 rounded-sm transform rotate-45"></div>
                <div class="w-2 h-2 bg-red-400 rounded-sm transform rotate-45"></div>
                <div class="w-2 h-2 bg-red-400 rounded-sm transform rotate-45"></div>
                <div class="w-2 h-2 bg-red-400 rounded-sm transform rotate-45"></div>
                <div class="w-2 h-2 bg-red-400 rounded-sm transform rotate-45"></div>
            </div>
        </div>
    </div>

    <!-- Dark mode toggle -->
    <div class="absolute top-4 right-4 z-50">
        @livewire('dark-mode-toggle')
    </div>

    <!-- Main content -->
    <div class="relative min-h-screen flex items-center justify-center p-4">
        <div class="max-w-2xl w-full text-center">
            <!-- Logo -->
            <div class="flex items-center justify-center mb-8">
                <a href="{{ route('home') }}" class="flex items-center space-x-2">
                    <img src="{{ $settings['site_logo'] ?? config('branding.default_site_logo') }}" alt="{{ $settings['site_name'] ?? config('app.name') }}" class="w-auto md:h-10 h-8">
                </a>
            </div>

            <!-- Error icon -->
            <div class="mb-8">
                <div class="relative inline-block">
                    <div class="w-32 h-32 mx-auto mb-6 rounded-full bg-gradient-to-r from-red-500 to-pink-600 flex items-center justify-center shadow-2xl">
                        <svg class="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                    </div>
                    <div class="absolute inset-0 blur-3xl opacity-30">
                        <div class="w-32 h-32 mx-auto rounded-full bg-red-500"></div>
                    </div>
                </div>
            </div>

            <!-- Error code -->
            <div class="text-7xl md:text-9xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-pink-600 mb-4">
                429
            </div>

            <!-- Error message -->
            <h1 class="md:text-4xl text-2xl font-bold text-zinc-900 dark:text-white mb-4">
                Too Many Requests
            </h1>
            <p class="md:text-lg text-base text-zinc-600 dark:text-zinc-400 mb-8 max-w-md mx-auto">
                Whoa there! You're making requests too quickly. Please slow down and try again in a moment.
            </p>

            <!-- Rate limit info -->
            <div class="bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-8 max-w-md mx-auto">
                <p class="text-sm text-red-800 dark:text-red-300">
                    <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                    @if(isset($retryAfter) && $retryAfter > 0)
                        Please wait {{ $retryAfter }} seconds before trying again
                    @else
                        Please wait a moment before trying again
                    @endif
                </p>
            </div>

            <!-- Action buttons -->
            <div class="flex flex-col sm:flex-row items-center text-sm md:text-base justify-center gap-4">
                <button onclick="setTimeout(() => window.location.reload(), {{ $retryAfter ?? 60 }} * 1000)" 
                        class="inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-cyan-500 to-cyan-600 hover:from-cyan-600 hover:to-cyan-700 text-white font-semibold rounded-lg shadow-lg transition-all duration-200 transform hover:scale-105">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    Wait and Retry
                </button>
                
                <a href="{{ route('home') }}" 
                   class="inline-flex items-center justify-center px-6 py-3 bg-white dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg border-2 border-zinc-200 dark:border-zinc-700 hover:border-cyan-500 dark:hover:border-cyan-500 transition-all duration-200">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                    </svg>
                    Back to Home
                </a>
            </div>

            <!-- Help text -->
            <div class="mt-12 text-sm text-zinc-500 dark:text-zinc-500">
                This is a protective measure to ensure fair usage for all users
            </div>
        </div>
    </div>

    @fluxScripts
    @livewireScripts
</body>
</html>

