<!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>{{ config('app.name', 'Laravel') }}</title>

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

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="font-sans text-slate-900 antialiased">
        <div class="min-h-screen bg-gradient-to-br from-sky-50 via-white to-rose-50 px-4 py-8 sm:px-6 lg:px-8">
            <div class="mx-auto flex min-h-[calc(100vh-4rem)] w-full max-w-6xl items-center justify-center">
                <div class="grid w-full overflow-hidden rounded-[2rem] border border-white/80 bg-white/90 shadow-2xl shadow-sky-100/70 backdrop-blur lg:grid-cols-[0.95fr_1.05fr]">
                    <div class="relative hidden overflow-hidden bg-gradient-to-br from-cyan-500 via-sky-500 to-violet-500 p-10 text-white lg:block">
                        <div class="absolute -left-16 top-10 h-44 w-44 rounded-full bg-white/20"></div>
                        <div class="absolute bottom-12 right-8 h-56 w-56 rounded-full bg-amber-200/30"></div>
                        <div class="absolute right-20 top-28 h-20 w-20 rounded-full bg-rose-300/40"></div>

                        <a href="/" class="relative inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-white/95 shadow-lg shadow-sky-900/20">
                            <x-application-logo class="h-9 w-9 fill-current text-sky-600" />
                        </a>

                        <div class="relative mt-24 max-w-sm">
                            <p class="text-sm font-semibold uppercase tracking-[0.28em] text-white/80">{{ config('app.name', 'Laravel') }}</p>
                            <h1 class="mt-5 text-4xl font-bold leading-tight">Welcome back to your workspace.</h1>
                            <p class="mt-5 text-base leading-7 text-white/85">Sign in to manage your account with a secure, simple, and focused experience.</p>
                        </div>

                        <div class="relative mt-16 grid grid-cols-3 gap-3">
                            <div class="h-24 rounded-3xl bg-white/20"></div>
                            <div class="h-24 rounded-3xl bg-white/30"></div>
                            <div class="h-24 rounded-3xl bg-white/20"></div>
                        </div>
                    </div>

                    <div class="flex min-h-[640px] items-center justify-center px-5 py-8 sm:px-10 lg:px-14">
                        <div class="w-full max-w-md">
                            <div class="mb-8 flex items-center gap-3 lg:hidden">
                                <a href="/" class="inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-sky-100">
                                    <x-application-logo class="h-8 w-8 fill-current text-sky-600" />
                                </a>
                                <div>
                                    <p class="text-sm font-semibold text-slate-500">{{ config('app.name', 'Laravel') }}</p>
                                    <p class="text-lg font-bold text-slate-900">{{ __('Welcome back') }}</p>
                                </div>
                            </div>

                            {{ $slot }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
