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

        <title>{{ $settings['title'] }} - {{ config('app.name', 'ViZuTrade') }}</title>

        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700,800&display=swap" rel="stylesheet" />

        <script>
            if (
                localStorage.theme === 'dark' ||
                (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
            ) {
                document.documentElement.classList.add('dark');
            }
        </script>

        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="bg-slate-50 font-sans text-slate-950 antialiased transition-colors duration-300 dark:bg-slate-950 dark:text-white">
        <main
            x-data="{
                darkMode: document.documentElement.classList.contains('dark'),
                toggleTheme() {
                    this.darkMode = ! this.darkMode;
                    document.documentElement.classList.toggle('dark', this.darkMode);
                    localStorage.theme = this.darkMode ? 'dark' : 'light';
                    window.dispatchEvent(new Event('theme-changed'));
                }
            }"
            class="min-h-screen overflow-hidden bg-slate-50 text-slate-950 transition-colors duration-300 dark:bg-slate-950 dark:text-white"
        >
            <div class="pointer-events-none fixed inset-0 bg-[radial-gradient(circle_at_top_right,rgba(37,99,235,0.18),transparent_34rem)] dark:bg-[radial-gradient(circle_at_top_right,rgba(59,130,246,0.22),transparent_34rem)]"></div>
            <x-theme-toggle class="absolute right-4 top-4 z-10 sm:right-6 sm:top-6" />

            <section class="relative flex min-h-screen items-center px-4 py-10 sm:px-6 lg:px-8">
                <div class="mx-auto grid w-full max-w-6xl gap-8 lg:grid-cols-[1fr_26rem] lg:items-center">
                    <div>
                        <div class="inline-flex items-center gap-3">
                            <x-application-logo class="h-12 w-52" />
                        </div>

                        <div class="mt-10 max-w-3xl">
                            <p class="text-sm font-black uppercase tracking-wide text-blue-600 dark:text-blue-300">Scheduled Maintenance</p>
                            <h1 class="mt-4 text-4xl font-black leading-tight text-slate-950 dark:text-white sm:text-5xl lg:text-6xl">
                                {{ $settings['title'] }}
                            </h1>
                            <p class="mt-6 text-base leading-8 text-slate-600 dark:text-slate-300 sm:text-lg">
                                {{ $settings['message'] }}
                            </p>
                        </div>

                    </div>

                    <aside class="rounded-lg border border-blue-100 bg-white p-6 shadow-xl shadow-blue-950/10 dark:border-blue-900/50 dark:bg-slate-900 dark:shadow-black/30">
                        <div class="rounded-lg bg-blue-50 p-5 dark:bg-blue-950/40">
                            <p class="text-sm font-bold uppercase tracking-wide text-blue-700 dark:text-blue-200">Status</p>
                            <h2 class="mt-3 text-2xl font-black text-slate-950 dark:text-white">We are currently under maintenance</h2>
                            <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">
                                Normal access is temporarily paused while we improve the trading workspace.
                            </p>
                        </div>

                        <div class="mt-5 grid gap-3">
                            <div class="flex items-center justify-between rounded-lg border border-blue-100 px-4 py-3 dark:border-blue-900/50">
                                <span class="text-sm font-semibold text-slate-600 dark:text-slate-300">Dashboard</span>
                                <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-bold text-slate-700 dark:bg-slate-800 dark:text-slate-200">Paused</span>
                            </div>
                            <div class="flex items-center justify-between rounded-lg border border-blue-100 px-4 py-3 dark:border-blue-900/50">
                                <span class="text-sm font-semibold text-slate-600 dark:text-slate-300">Registration</span>
                                <span class="rounded-full bg-red-100 px-3 py-1 text-xs font-bold text-red-700 dark:bg-red-950 dark:text-red-200">Disabled</span>
                            </div>
                        </div>
                    </aside>
                </div>
            </section>
        </main>
    </body>
</html>
