<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
    <head>
        @include('partials.head')
    </head>
    <body class="min-h-screen flex flex-col bg-background" 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>

        <x-navigation />

        <!-- Spacer for fixed navigation -->
        <div class="h-16"></div>

        <main id="main-content" role="main" class="flex-1" tabindex="-1">
            <div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
                {{ $slot }}
            </div>
        </main>

        <x-footer />

        @fluxScripts
    </body>
</html>
