<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        {{-- Force light mode before @fluxAppearance reads localStorage --}}
        <script>localStorage.setItem('flux_appearance', 'light');</script>
        @include('partials.head')
    </head>
    <body class="min-h-screen bg-zinc-100 antialiased" x-data x-init="$flux.appearance = 'light'">
        <div class="flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
            <div class="flex w-full max-w-sm flex-col gap-6">
                <a href="{{ route('home') }}" class="flex items-center justify-center gap-3" wire:navigate>
                    <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center shadow-md">
                        <iconify-icon icon="lucide:fuel" class="text-white text-xl"></iconify-icon>
                    </div>
                    <span class="font-display text-2xl font-black tracking-tighter text-primary">FuelAlert</span>
                </a>
                <div class="bg-zinc-50 border border-zinc-300 rounded-2xl shadow-sm p-8 flex flex-col gap-6">
                    {{ $slot }}
                </div>
            </div>
        </div>

        @persist('toast')
            <flux:toast.group>
                <flux:toast />
            </flux:toast.group>
        @endpersist

        <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js" defer></script>
        @fluxScripts
    </body>
</html>
