<!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', 'Money-Wise') }}</title>

        <link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">

        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="font-sans text-navy-900 antialiased">
        <div class="grid min-h-screen lg:grid-cols-[1.1fr,1fr]">

            {{-- Brand panel --}}
            <div class="relative hidden overflow-hidden bg-navy-950 lg:block">
                <img src="{{ asset('images/stock/hero-family.jpg') }}" alt="" class="absolute inset-0 h-full w-full object-cover opacity-25">
                <div class="absolute inset-0 bg-gradient-to-br from-navy-950 via-navy-900/85 to-wise-900/70"></div>

                <div class="relative flex h-full flex-col justify-between p-12">
                    <a href="/" wire:navigate aria-label="Money-Wise home">
                        <x-logo light />
                    </a>

                    <div class="max-w-md">
                        <p class="font-display text-3xl font-bold leading-snug text-white">
                            "Before Money-Wise I thought I knew investing. Now I have a plan that actually fits <span class="text-gradient">my goals and my values</span>."
                        </p>
                        <div class="mt-5 flex items-center gap-3">
                            <span class="grid h-11 w-11 place-items-center rounded-full bg-gradient-to-br from-wise-400 to-wise-600 font-display text-sm font-extrabold text-navy-950">S</span>
                            <div>
                                <p class="font-display font-bold text-white">Sharon</p>
                                <p class="text-sm text-navy-300">Investable graduate</p>
                            </div>
                        </div>
                    </div>

                    <div class="flex items-center gap-6 text-sm text-navy-300">
                        <span class="flex items-center gap-2"><x-icon name="users" class="h-4 w-4 text-wise-400" /> 18,000+ community</span>
                        <span class="flex items-center gap-2"><x-icon name="shield-check" class="h-4 w-4 text-wise-400" /> Private &amp; secure</span>
                    </div>
                </div>
            </div>

            {{-- Form panel --}}
            <div class="relative flex flex-col items-center justify-center overflow-hidden bg-mesh px-6 py-12">
                <div class="blob -right-24 top-10 h-72 w-72 bg-wise-200/50" aria-hidden="true"></div>

                <a href="/" wire:navigate class="relative mb-8 lg:hidden" aria-label="Money-Wise home">
                    <x-logo size="lg" />
                </a>

                <div class="card relative w-full max-w-md p-8 animate-pop sm:p-9">
                    {{ $slot }}
                </div>

                <p class="relative mt-6 flex items-center gap-1.5 text-sm text-navy-500">
                    <x-icon name="shield-check" class="h-4 w-4 text-wise-500" /> Your money story is safe with us.
                </p>
            </div>
        </div>
    </body>
</html>
