@php
    $slides       = config('dashboard.auth.slides', []);
    $slideCount   = count($slides);
    $rotateMs     = (int) config('dashboard.auth.rotate_ms', 6000);
    $badge        = config('dashboard.auth.badge') ?: config('dashboard.brand_name');
    $locales      = config('dashboard.locales', ['ar', 'en']);
    $currentLocale = app()->getLocale();
    $logoLight    = config('dashboard.logo_path');
    $logoDarkFallback = file_exists(public_path('assets/images/logo-light.png'))
        ? 'assets/images/logo-light.png'
        : $logoLight;
    $logoDark     = config('dashboard.logo_dark_path') ?: $logoDarkFallback;
@endphp

<div class="dash-auth-stage relative flex min-h-screen items-center justify-center overflow-hidden px-3 py-4 sm:px-4 sm:py-8 dash-auth-body">
    {{-- Decorative accent blobs --}}
    <div aria-hidden="true" class="pointer-events-none absolute inset-0 -z-0">
        <div class="dash-auth-blob -start-28 -top-16 h-56 w-56 animate-pulse sm:h-72 sm:w-72"
             style="animation-duration: 6s;"></div>
        <div class="dash-auth-blob -bottom-14 end-0 h-60 w-60 animate-pulse sm:h-80 sm:w-80"
             style="animation-duration: 8s; animation-delay: 1s; background-color: color-mix(in oklch, var(--accent) 18%, transparent);"></div>
        <div class="dash-auth-blob end-[10%] top-[12%] hidden h-40 w-40 animate-pulse md:block"
             style="animation-duration: 10s; animation-delay: 2s; background-color: color-mix(in oklch, var(--accent) 14%, transparent);"></div>

        {{-- Floating accent orbs --}}
        <div class="dash-auth-blob start-[16%] top-[22%] hidden h-9 w-9 animate-bounce sm:block"
             style="animation-duration: 7s; background-color: color-mix(in oklch, var(--accent) 14%, transparent); filter: blur(1px);"></div>
        <div class="dash-auth-blob end-[32%] top-[20%] hidden h-16 w-16 animate-bounce sm:block"
             style="animation-duration: 9s; animation-delay: 0.6s; background-color: color-mix(in oklch, var(--accent) 10%, transparent); filter: blur(6px);"></div>
        <div class="dash-auth-blob start-[8%] top-[58%] hidden h-7 w-7 animate-pulse sm:block"
             style="animation-duration: 4s; background-color: color-mix(in oklch, var(--accent) 18%, transparent); filter: none; box-shadow: 0 0 24px color-mix(in oklch, var(--accent) 25%, transparent);"></div>
        <div class="dash-auth-blob start-[32%] top-[10%] hidden h-12 w-12 animate-bounce sm:block"
             style="animation-duration: 11s; animation-delay: 1.2s; background-color: color-mix(in oklch, var(--accent) 22%, transparent); filter: blur(6px);"></div>
        <div class="dash-auth-blob end-[24%] bottom-[16%] hidden h-10 w-10 animate-bounce sm:block"
             style="animation-duration: 8s; animation-delay: 2s; background-color: color-mix(in oklch, var(--accent) 22%, transparent); filter: blur(2px);"></div>
    </div>

    {{-- Main split-screen card --}}
    <div class="dash-auth-shell relative z-10 grid h-auto w-full max-w-[81.25rem] grid-cols-1 overflow-hidden rounded-2xl md:min-h-[32.5rem] md:grid-cols-[0.78fr_1.22fr] md:rounded-[30px]">

        {{-- Mobile-only header (logo + lang/theme switcher) --}}
        <header class="dash-auth-header relative z-10 flex items-center justify-between border-b px-4 py-3 md:hidden"
                style="background-color: color-mix(in oklch, var(--surface) 78%, transparent);
                       border-color: color-mix(in oklch, var(--accent) 20%, var(--border));
                       backdrop-filter: blur(12px);
                       box-shadow: 0 1px 0 0 color-mix(in oklch, var(--accent) 8%, transparent);">
            <a href="{{ url('/') }}" class="flex shrink-0 items-center gap-3">
                <img x-show="!dark"
                     src="{{ asset($logoLight) }}"
                     alt="{{ config('dashboard.brand_name') }}"
                     class="h-8 w-auto object-contain">
                <img x-show="dark" x-cloak
                     src="{{ asset($logoDark) }}"
                     alt="{{ config('dashboard.brand_name') }}"
                     class="h-8 w-auto object-contain">
            </a>

            <x-dashboard::auth-switcher/>
        </header>

        {{-- Form panel (col 1 on md+) --}}
        <section class="dash-auth-form-panel relative isolate overflow-hidden p-6 sm:p-8 md:p-10 md:ps-16 md:col-start-1 md:row-start-1">
            {{-- Ambience blobs inside the form panel --}}
            <div aria-hidden="true" class="pointer-events-none absolute -top-24 -end-32 h-72 w-72 rounded-full blur-3xl"
                 style="background: radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--accent) 24%, transparent) 0%, color-mix(in oklch, var(--accent) 8%, transparent) 50%, transparent 75%);"></div>
            <div aria-hidden="true" class="pointer-events-none absolute -bottom-32 -start-24 h-80 w-80 rounded-full blur-3xl"
                 style="background: radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--accent) 18%, transparent) 0%, transparent 70%);"></div>
            <div aria-hidden="true" class="pointer-events-none absolute end-[12%] top-[8%] hidden h-6 w-6 rounded-full md:block"
                 style="background-color: color-mix(in oklch, var(--accent) 22%, transparent); filter: blur(2px);"></div>

            <div class="relative mx-auto flex h-full w-full max-w-[30rem] flex-col justify-center">
                {{ $slot }}
            </div>
        </section>

        {{-- Visual / branding panel (col 2 on md+) --}}
        <aside aria-hidden="true"
               class="dash-auth-hero-panel relative hidden overflow-hidden p-8 sm:p-10 md:col-start-2 md:row-start-1 md:flex md:flex-col md:p-12">
            {{-- Soft decorative dots --}}
            @foreach ([
                ['cls' => 'start-7 top-24 h-5 w-5',          'op' => 14, 'blur' => false],
                ['cls' => 'start-14 top-44 h-8 w-8',         'op' => 10, 'blur' => true],
                ['cls' => 'bottom-12 end-16 h-6 w-6',        'op' => 18, 'blur' => false],
                ['cls' => 'start-24 top-14 h-10 w-10',       'op' => 8,  'blur' => true],
                ['cls' => 'start-1/3 top-24 h-4 w-4',        'op' => 22, 'blur' => false],
                ['cls' => 'start-[18%] bottom-20 h-12 w-12', 'op' => 9,  'blur' => true],
                ['cls' => 'end-24 top-28 h-7 w-7',           'op' => 16, 'blur' => false],
                ['cls' => 'end-12 bottom-24 h-9 w-9',        'op' => 11, 'blur' => true],
                ['cls' => 'start-[46%] bottom-10 h-5 w-5',   'op' => 20, 'blur' => false],
            ] as $dot)
                <span aria-hidden="true"
                      class="pointer-events-none absolute hidden rounded-full md:block {{ $dot['cls'] }} {{ $dot['blur'] ? 'blur-[2px]' : '' }}"
                      style="background-color: color-mix(in oklch, var(--accent) {{ $dot['op'] }}%, transparent);"></span>
            @endforeach

            {{-- Desktop language/theme switcher pinned top --}}
            <div class="absolute end-5 top-8 z-30">
                <x-dashboard::auth-switcher/>
            </div>

            <div class="relative z-10 flex h-full flex-col">
                {{-- self-start collapses the wrapper to its content width and pins it to the start
                     side (right in RTL, left in LTR), opposite the switcher which is `end-5`. --}}
                <div class="flex shrink-0 items-center gap-3 self-start">
                    <img x-show="!dark"
                         src="{{ asset($logoLight) }}"
                         alt="{{ config('dashboard.brand_name') }}"
                         class="h-16 w-auto object-contain">
                    <img x-show="dark" x-cloak
                         src="{{ asset($logoDark) }}"
                         alt="{{ config('dashboard.brand_name') }}"
                         class="h-16 w-auto object-contain">
                </div>

                <x-dashboard::auth-carousel :slides="$slides" :rotate-ms="$rotateMs"/>
            </div>
        </aside>
    </div>
</div>