<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="theme-color" content="#090B0F">

    <title>@yield('title', 'Dashboard') — ALGA ARENA</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Oxanium:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    @vite(['resources/scss/app.scss', 'resources/js/app.js'])
    @stack('styles')

    <link rel="icon" href="{{ asset('assets/images/brand/favicon.svg') }}" type="image/svg+xml">
</head>
<body>
    <a href="#main-content" class="skip-link">Skip to main content</a>

    <div class="arena-overlay" id="paletteBackdrop" aria-hidden="true"></div>

    <div class="command-palette" id="commandPalette" role="dialog" aria-label="Search" aria-modal="true">
        <div class="command-palette-input-wrap">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
            <input type="text" id="commandInput" class="command-palette-input" placeholder="Search players, teams, events..." aria-label="Search">
            <kbd class="kbd">ESC</kbd>
        </div>
        <div class="command-results" id="commandResults">
            <div class="command-group-label">Quick Actions</div>
            <a class="command-result-item" href="{{ route('games.index') }}"><span>Browse Games</span></a>
            <a class="command-result-item" href="{{ route('events.index') }}"><span>Browse Events</span></a>
            <a class="command-result-item" href="{{ route('preview.players') }}"><span>Browse Players</span></a>
            <a class="command-result-item" href="{{ route('preview.teams') }}"><span>Browse Teams</span></a>
        </div>
    </div>

    <div class="arena-shell" id="arenaShell">
        <x-app.sidebar
            :nav-items="$navItems ?? []"
            :featured-tournament="$featuredTournament ?? null"
            :shell-player="$shellPlayer ?? null"
        />

        <x-app.topbar
            :shell-player="$shellPlayer ?? null"
            :notification-count="$notificationCount ?? 0"
        />

        <main class="arena-main" id="main-content" tabindex="-1">
            @yield('content')
        </main>
    </div>

    <x-app.mobile-nav
        :mobile-nav-items="$mobileNavItems ?? []"
        :nav-items="$navItems ?? []"
    />

    @stack('scripts')
</body>
</html>
