@php
    $livewire ??= null;
    $renderHookScopes = $livewire?->getRenderHookScopes();
@endphp

<x-filament-panels::layout.base :livewire="$livewire">
    <div
        class="mw-auth"
        style="--mw-hero: url('{{ asset('images/stock/hero-family.jpg') }}')"
    >
        {{-- Brand panel (hidden on small screens) --}}
        <aside class="mw-auth__brand">
            <div class="mw-auth__brand-inner">
                <a href="{{ url('/') }}" aria-label="Money-Wise home">
                    <img src="{{ asset('images/logo-white.png') }}" alt="Money-Wise" class="mw-auth__logo">
                </a>

                <div class="mw-auth__quote">
                    <p class="mw-auth__quote-text">
                        &ldquo;Before Money-Wise I thought I knew investing. Now I have a plan that actually fits
                        <span class="mw-auth__accent">my goals and my values</span>.&rdquo;
                    </p>
                    <div class="mw-auth__person">
                        <span class="mw-auth__avatar">S</span>
                        <span class="mw-auth__person-meta">
                            <span class="mw-auth__person-name">Sharon</span>
                            <span class="mw-auth__person-role">Investable graduate</span>
                        </span>
                    </div>
                </div>

                <div class="mw-auth__badges">
                    <span><span class="mw-auth__dot"></span> 18,000+ community</span>
                    <span><span class="mw-auth__dot"></span> Private &amp; secure</span>
                </div>
            </div>
        </aside>

        {{-- Form panel --}}
        <div class="mw-auth__panel">
            <a href="{{ url('/') }}" class="mw-auth__panel-logo" aria-label="Money-Wise home">
                <img src="{{ asset('images/logo.png') }}" alt="Money-Wise">
            </a>

            <main class="mw-auth__form">
                {{ $slot }}
            </main>

            <p class="mw-auth__footnote">
                <span class="mw-auth__dot mw-auth__dot--wise"></span> Your money story is safe with us.
            </p>
        </div>
    </div>

    {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::FOOTER, scopes: $renderHookScopes) }}

    @verbatim
    <style>
        .mw-auth {
            display: grid;
            grid-template-columns: 1fr;
            min-height: 100dvh;
            width: 100%;
        }
        @media (min-width: 1024px) {
            .mw-auth { grid-template-columns: 1.1fr 1fr; }
        }

        /* ---- Brand panel ---- */
        .mw-auth__brand { display: none; position: relative; overflow: hidden; background: #0d142e; }
        @media (min-width: 1024px) { .mw-auth__brand { display: block; } }
        .mw-auth__brand::before {
            content: ""; position: absolute; inset: 0;
            background-image: var(--mw-hero); background-size: cover; background-position: center;
            opacity: 0.22;
        }
        .mw-auth__brand::after {
            content: ""; position: absolute; inset: 0;
            background: linear-gradient(135deg, #0d142e 0%, rgba(21,32,74,0.85) 45%, rgba(29,76,102,0.7) 100%);
        }
        .mw-auth__brand-inner {
            position: relative; z-index: 1;
            display: flex; flex-direction: column; justify-content: space-between;
            height: 100%; padding: 3.5rem 3rem; color: #fff;
        }
        .mw-auth__logo { height: 2.75rem; width: auto; user-select: none; }
        .mw-auth__quote { max-width: 30rem; }
        .mw-auth__quote-text {
            font-size: 1.85rem; line-height: 1.32; font-weight: 700; letter-spacing: -0.01em; color: #fff;
        }
        .mw-auth__accent { color: #8ed4f2; }
        .mw-auth__person { margin-top: 1.5rem; display: flex; align-items: center; gap: 0.85rem; }
        .mw-auth__avatar {
            display: grid; place-items: center; height: 2.75rem; width: 2.75rem; border-radius: 9999px;
            background: linear-gradient(135deg, #58b9e6, #2787b8);
            color: #0d142e; font-weight: 800; font-size: 0.95rem;
        }
        .mw-auth__person-meta { display: flex; flex-direction: column; line-height: 1.25; }
        .mw-auth__person-name { font-weight: 700; color: #fff; }
        .mw-auth__person-role { font-size: 0.85rem; color: #91a4d6; }
        .mw-auth__badges { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.85rem; color: #b9c6e7; }
        .mw-auth__badges span { display: inline-flex; align-items: center; gap: 0.5rem; }
        .mw-auth__dot { height: 0.45rem; width: 0.45rem; border-radius: 9999px; background: #58b9e6; display: inline-block; }
        .mw-auth__dot--wise { background: #2787b8; }

        /* ---- Form panel ---- */
        .mw-auth__panel {
            position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: 3rem 1.5rem; overflow: hidden;
            background-color: #f6f9fe;
            background-image:
                radial-gradient(60rem 60rem at 110% -10%, rgba(88,185,230,0.16), transparent 60%),
                radial-gradient(50rem 50rem at -10% 110%, rgba(28,43,95,0.08), transparent 55%);
        }
        .mw-auth__panel-logo { margin-bottom: 2rem; }
        .mw-auth__panel-logo img { height: 3rem; width: auto; }
        @media (min-width: 1024px) { .mw-auth__panel-logo { display: none; } }
        .mw-auth__form { position: relative; width: 100%; max-width: 27rem; }
        .mw-auth__footnote {
            position: relative; margin-top: 1.5rem; display: flex; align-items: center; gap: 0.5rem;
            font-size: 0.85rem; color: #4b64ac;
        }

        /* The Filament auth card sits on a soft surface to match the front-end .card */
        .mw-auth__form .fi-simple-page {
            width: 100%;
            background: #ffffff;
            border-radius: 1.5rem;
            box-shadow: 0 24px 60px -20px rgba(13,20,46,0.25);
            border: 1px solid rgba(28,43,95,0.06);
            padding: 2.25rem;
        }
    </style>
    @endverbatim
</x-filament-panels::layout.base>