<!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>@yield('title', config('app.name', 'Dewemoji'))</title>

        <link rel="icon" href="/favicon.ico">
        <link rel="icon" type="image/png" sizes="32x32" href="/assets/logo/logo-mark-128.png">
        <link rel="icon" type="image/png" sizes="192x192" href="/assets/logo/logo-mark-512.png">
        <link rel="apple-touch-icon" sizes="180x180" href="/assets/logo/logo-mark-512.png">

        <script>
            (() => {
                const stored = localStorage.getItem('dewemoji_theme');
                const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
                const mode = stored || (prefersDark ? 'dark' : 'light');
                const root = document.documentElement;
                root.classList.toggle('dark', mode === 'dark');
                root.classList.toggle('theme-light', mode !== 'dark');
            })();
        </script>

        <link rel="preload" href="/assets/fonts/PlusJakartaSans-Regular.ttf" as="font" type="font/ttf" crossorigin>
        <script src="https://unpkg.com/lucide@latest"></script>
        <script src="https://cdn.tailwindcss.com"></script>
        <script>
            tailwind.config = {
                darkMode: 'class',
                theme: {
                    extend: {
                        fontFamily: {
                            sans: ['"Plus Jakarta Sans"', 'system-ui', 'sans-serif'],
                            display: ['"Plus Jakarta Sans"', 'system-ui', 'sans-serif'],
                        },
                        colors: {
                            brand: {
                                sun: '#fcb735',
                                sunSoft: '#ffda9c',
                                ocean: '#2053ff',
                                oceanSoft: '#356cf0',
                            },
                        },
                    },
                },
            };
        </script>

        <!-- Scripts -->
        @vite(['resources/js/app.js'])
        <style>
            @font-face {
                font-family: "Plus Jakarta Sans";
                src: url("/assets/fonts/PlusJakartaSans-Regular.ttf") format("truetype");
                font-weight: 400;
                font-style: normal;
                font-display: swap;
            }
            @font-face {
                font-family: "Plus Jakarta Sans";
                src: url("/assets/fonts/PlusJakartaSans-Medium.ttf") format("truetype");
                font-weight: 500;
                font-style: normal;
                font-display: swap;
            }
            @font-face {
                font-family: "Plus Jakarta Sans";
                src: url("/assets/fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");
                font-weight: 600;
                font-style: normal;
                font-display: swap;
            }
            @font-face {
                font-family: "Plus Jakarta Sans";
                src: url("/assets/fonts/PlusJakartaSans-Bold.ttf") format("truetype");
                font-weight: 700;
                font-style: normal;
                font-display: swap;
            }
        </style>
    </head>
    <body class="min-h-screen bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100 antialiased" style="font-family: 'Plus Jakarta Sans', system-ui, sans-serif;">
        <div class="fixed inset-0 -z-10 pointer-events-none">
            <div class="absolute top-[-15%] right-[-10%] w-[360px] h-[360px] bg-blue-500/10 blur-[120px]"></div>
            <div class="absolute bottom-[-15%] left-[-10%] w-[420px] h-[420px] bg-amber-500/10 blur-[140px]"></div>
        </div>

        <div class="min-h-screen flex flex-col items-center justify-center px-6 py-12">
            <div class="w-full max-w-md">
                <div class="flex items-center justify-between mb-8">
                    <a href="/" class="inline-flex items-center gap-3">
                        <span class="w-12 h-12 rounded-2xl bg-gradient-to-br from-white to-gray-200 dark:from-white/20 dark:to-white/5 flex items-center justify-center shadow-lg">
                            <img src="/assets/logo/logo-mark.svg" alt="Dewemoji logo" class="w-7 h-7 object-contain" />
                        </span>
                        <span class="font-semibold text-lg">Dewemoji</span>
                    </a>
                    <button id="theme-toggle" class="w-10 h-10 rounded-full border border-slate-200 dark:border-white/10 bg-white/70 dark:bg-white/5 flex items-center justify-center text-slate-500 dark:text-slate-200 hover:text-slate-900 dark:hover:text-white transition-colors">
                        <span class="sr-only">Toggle theme</span>
                        <i data-lucide="moon" class="w-4 h-4" data-theme-icon="dark"></i>
                        <i data-lucide="sun" class="w-4 h-4 hidden" data-theme-icon="light"></i>
                    </button>
                </div>

                <div class="w-full rounded-2xl border border-slate-200/70 dark:border-white/10 bg-white/90 dark:bg-slate-900/70 shadow-xl backdrop-blur px-6 py-6">
                    {{ $slot }}
                </div>
            </div>
        </div>

        <script>lucide.createIcons();</script>
        <script>
            (() => {
                const root = document.documentElement;
                const toggle = document.getElementById('theme-toggle');
                const iconDark = document.querySelector('[data-theme-icon="dark"]');
                const iconLight = document.querySelector('[data-theme-icon="light"]');

                const setTheme = (mode) => {
                    root.classList.toggle('dark', mode === 'dark');
                    root.classList.toggle('theme-light', mode !== 'dark');
                    if (iconDark && iconLight) {
                        iconDark.classList.toggle('hidden', mode !== 'dark');
                        iconLight.classList.toggle('hidden', mode === 'dark');
                    }
                    localStorage.setItem('dewemoji_theme', mode);
                };

                const stored = localStorage.getItem('dewemoji_theme');
                if (stored) {
                    setTheme(stored);
                } else {
                    setTheme(root.classList.contains('dark') ? 'dark' : 'light');
                }

                toggle?.addEventListener('click', () => {
                    const next = root.classList.contains('dark') ? 'light' : 'dark';
                    setTheme(next);
                });
            })();
        </script>
    </body>
</html>
