<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
    <head>
        @include('partials.head')
    </head>
    <body class="min-h-screen bg-background antialiased" style="font-family: var(--font-{{ app()->getLocale() === 'ar' ? 'arabic' : 'english' }})">
        <!-- Skip to content link for keyboard accessibility -->
        <a href="#main-content" class="skip-link" data-test="skip-to-content">
            {{ __('accessibility.skip_to_content') }}
        </a>

        <main id="main-content" role="main" tabindex="-1" class="relative grid h-dvh lg:grid-cols-2">
            <!-- Left: Brand panel with logo as full background -->
            <a href="{{ route('home') }}" class="relative hidden h-full bg-primary lg:block" wire:navigate>
                <img
                    src="{{ asset('images/logo.png') }}"
                    alt="{{ __('LIBRA for Rights') }}"
                    class="absolute inset-0 h-full w-full object-cover"
                />
                <span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
            </a>

            <!-- Right: Form panel with background and subtle pattern -->
            <div class="auth-pattern relative w-full bg-background lg:p-8">
                <!-- Language Toggle -->
                <div class="absolute end-4 top-4 z-50">
                    <x-language-toggle variant="light" />
                </div>

                <div class="mx-auto flex h-full w-full flex-col items-center justify-center space-y-6 px-8 sm:w-[350px] sm:px-0">
                    <!-- Mobile logo (shown only on mobile) -->
                    <a href="{{ route('home') }}" class="z-20 flex flex-col items-center gap-2 font-medium lg:hidden" wire:navigate>
                        <x-logo size="xl" />
                        <span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
                    </a>
                    {{ $slot }}
                </div>
            </div>
        </main>
        @fluxScripts
    </body>
</html>
