<!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>404 - Page Not Found - {{ $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-cyan-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-purple-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-lime-400 rounded-sm transform rotate-45"></div>
                <div class="w-2 h-2 bg-lime-400 rounded-sm transform rotate-45"></div>
                <div class="w-2 h-2 bg-lime-400 rounded-sm transform rotate-45"></div>
                <div class="w-2 h-2 bg-lime-400 rounded-sm transform rotate-45"></div>
                <div class="w-2 h-2 bg-lime-400 rounded-sm transform rotate-45"></div>
                <div class="w-2 h-2 bg-lime-400 rounded-sm transform rotate-45"></div>
                <div class="w-2 h-2 bg-lime-400 rounded-sm transform rotate-45"></div>
                <div class="w-2 h-2 bg-lime-400 rounded-sm transform rotate-45"></div>
                <div class="w-2 h-2 bg-lime-400 rounded-sm transform rotate-45"></div>
                <div class="w-2 h-2 bg-lime-400 rounded-sm transform rotate-45"></div>
                <div class="w-2 h-2 bg-lime-400 rounded-sm transform rotate-45"></div>
                <div class="w-2 h-2 bg-lime-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 illustration -->
            <div class="mb-8">
                <div class="relative inline-block">
                    <div class="text-7xl md:text-9xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-500 to-purple-600">
                        404
                    </div>
                    <div class="absolute inset-0 blur-3xl opacity-30">
                        <div class="text-7xl md:text-9xl font-bold text-cyan-500">404</div>
                    </div>
                </div>
            </div>

            <!-- Error message -->
            <h1 class="md:text-4xl text-2xl font-bold text-zinc-900 dark:text-white mb-4">
                Page Not Found
            </h1>
            <p class="md:text-lg text-base text-zinc-600 dark:text-zinc-400 mb-8 max-w-md mx-auto">
                Sorry, we couldn't find the page you're looking for. It might have been moved or deleted.
            </p>

            <!-- Action buttons -->
            <div class="flex flex-col sm:flex-row items-center text-sm md:text-base justify-center gap-4">
                <a href="{{ route('home') }}" 
                   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="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>
                
                <button onclick="history.back()" 
                        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="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                    Go Back
                </button>
            </div>

            <!-- Help text -->
            <div class="mt-12 text-sm text-zinc-500 dark:text-zinc-500">
                Need help? <a href="#" class="text-cyan-600 dark:text-cyan-400 hover:underline">Contact support</a>
            </div>
        </div>
    </div>

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

