<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" x-data="{ darkMode: '{{ session('dark_mode', 'system') }}' }" 
      x-bind:class="{ 'dark': darkMode === 'dark' || (darkMode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches) }">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ $title ?? 'Authentication' }} - {{ $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">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">

    <!-- 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
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body
    class="min-h-screen bg-white dark:bg-zinc-900 transition-colors duration-300"
    style="--color-accent: #4285f4; --color-accent-content: #4285f4; --color-accent-foreground: #ffffff;"
>
    <!-- Background decorative elements -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
        <!-- Bottom-left lime circle -->
        <div class="absolute -bottom-32 -left-32 w-64 h-64 bg-lime-500 rounded-full opacity-20 dark:opacity-10"></div>
        
        <!-- Top-right purple semi-circle with chevrons -->
        <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>

    <!-- Main content -->
    <div class="relative min-h-screen flex items-center justify-center p-4 py-12">
        <div class="w-full max-w-3xl">
            <div class="bg-white dark:bg-zinc-800 rounded-2xl shadow-2xl overflow-hidden">
                <div class="p-8 lg:p-12">
                    <div class="max-w-2xl mx-auto">
                        <!-- Header -->
                        <div class="text-center mb-8">
                            <!-- Logo -->
                            <div class="flex items-center justify-center mb-6">
                                <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 h-8">
                                </a>
                            </div>
                            
                            <!-- Title -->
                            <h1 class="text-3xl font-bold text-zinc-900 dark:text-white mb-2">
                                {{ $title ?? 'Welcome Back' }}
                            </h1>
                            
                            <!-- Subtitle -->
                            <p class="text-zinc-600 dark:text-zinc-400">
                                {{ $subtitle ?? 'Sign in to your account' }}
                            </p>
                        </div>

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

                        <!-- Form content -->
                        {{ $slot }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    @fluxScripts

    <!-- Dark mode initialization -->
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('darkMode', () => ({
                init() {
                    const savedMode = '{{ session('dark_mode', 'system') }}';
                    this.darkMode = savedMode;
                    
                    // Listen for dark mode changes
                    this.$watch('darkMode', (value) => {
                        if (value === 'system') {
                            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
                            document.documentElement.classList.toggle('dark', prefersDark);
                        } else {
                            document.documentElement.classList.toggle('dark', value === 'dark');
                        }
                    });
                    
                    // Set initial state
                    if (savedMode === 'system') {
                        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
                        document.documentElement.classList.toggle('dark', prefersDark);
                    } else {
                        document.documentElement.classList.toggle('dark', savedMode === 'dark');
                    }
                }
            }));
        });
    </script>
</body>
</html>

