<!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="description" content="@yield('meta_description', 'ALGA ARENA — The global esports operating system. Compete. Connect. Conquer.')">
    <meta name="theme-color" content="#090B0F">

    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="@yield('title', 'ALGA ARENA') — Esports OS">
    <meta property="og:description" content="@yield('meta_description', 'The global esports operating system.')">
    <meta property="og:image" content="{{ asset('assets/images/generated/heroes/og-image.webp') }}">

    <title>@yield('title', 'ALGA ARENA') — Esports Operating System</title>

    <!-- Fonts -->
    <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=Space+Grotesk:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap" rel="stylesheet">

    <!-- Bootstrap 5.3 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <!-- ALGA ARENA Design System -->
    <link rel="stylesheet" href="{{ asset('assets/css/app.css') }}">
    @stack('styles')

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

    <!-- Public Navigation -->
    <nav class="public-nav" role="navigation" aria-label="Main navigation">
        <div class="public-nav-inner">
            <!-- Brand -->
            <a href="/" class="brand" aria-label="ALGA ARENA Home">
                <svg class="arena-logo" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <rect width="36" height="36" rx="8" fill="#00D4FF" fill-opacity="0.15"/>
                    <path d="M18 4L8 16H14L10 28H16L18 22L20 28H26L22 16H28L18 4Z" fill="#00D4FF"/>
                    <path d="M18 4L14 12H22L18 4Z" fill="#FFFFFF" fill-opacity="0.6"/>
                </svg>
                <div>
                    <div class="brand-name">ALGA ARENA</div>
                </div>
            </a>

            <!-- Nav links (desktop) -->
            <ul class="public-nav-links" role="list">
                <li><a href="/preview/discover">Discover</a></li>
                <li><a href="/preview/games">Games</a></li>
                <li><a href="/preview/players">Players</a></li>
                <li><a href="/preview/teams">Teams</a></li>
                <li><a href="/preview/tournaments">Tournaments</a></li>
                <li><a href="/preview/rankings">Rankings</a></li>
                <li><a href="/preview/subscriptions">Pricing</a></li>
            </ul>

            <!-- Actions -->
            <div class="public-nav-actions">
                <!-- Language switcher -->
                <div class="lang-switcher" role="group" aria-label="Language selection">
                    <button class="lang-btn active" data-lang="en" aria-label="English">EN</button>
                    <button class="lang-btn" data-lang="ar" aria-label="العربية">AR</button>
                </div>

                <a href="/login" class="btn-arena btn-ghost btn-sm">Sign In</a>
                <a href="/register" class="btn-arena btn-primary btn-sm">Join Free</a>

                <!-- Mobile hamburger -->
                <button class="btn-arena btn-ghost btn-icon d-md-none" id="mobileMenuToggle" aria-label="Open menu" aria-expanded="false" aria-controls="mobileOffcanvas">
                    <i class="bi bi-list" aria-hidden="true" style="font-size:1.25rem;"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- Mobile Offcanvas -->
    <div class="arena-overlay" id="offcanvasOverlay" aria-hidden="true"></div>
    <div class="offcanvas-arena" id="mobileOffcanvas" role="dialog" aria-modal="true" aria-label="Navigation menu">
        <div class="offcanvas-header">
            <a href="/" class="brand" style="gap:var(--sp-2); text-decoration:none; display:flex; align-items:center;">
                <svg class="arena-logo" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" width="28" height="28">
                    <rect width="36" height="36" rx="8" fill="#00D4FF" fill-opacity="0.15"/>
                    <path d="M18 4L8 16H14L10 28H16L18 22L20 28H26L22 16H28L18 4Z" fill="#00D4FF"/>
                </svg>
                <span style="font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:1rem; color:var(--arena-text-primary); letter-spacing:0.04em;">ALGA ARENA</span>
            </a>
            <button class="modal-close" id="offcanvasClose" aria-label="Close menu">
                <i class="bi bi-x-lg" aria-hidden="true"></i>
            </button>
        </div>
        <nav style="padding: var(--sp-4) 0; flex:1; overflow-y:auto;">
            <a class="sidebar-item" href="/preview/discover"><i class="bi bi-compass s-icon"></i><span>Discover</span></a>
            <a class="sidebar-item" href="/preview/games"><i class="bi bi-controller s-icon"></i><span>Games</span></a>
            <a class="sidebar-item" href="/preview/players"><i class="bi bi-person s-icon"></i><span>Players</span></a>
            <a class="sidebar-item" href="/preview/teams"><i class="bi bi-shield s-icon"></i><span>Teams</span></a>
            <a class="sidebar-item" href="/preview/tournaments"><i class="bi bi-trophy s-icon"></i><span>Tournaments</span></a>
            <a class="sidebar-item" href="/preview/rankings"><i class="bi bi-bar-chart s-icon"></i><span>Rankings</span></a>
            <a class="sidebar-item" href="/preview/recruitment"><i class="bi bi-bullseye s-icon"></i><span>Recruitment</span></a>
            <a class="sidebar-item" href="/preview/transfer-market"><i class="bi bi-arrow-left-right s-icon"></i><span>Transfer Market</span></a>
            <a class="sidebar-item" href="/preview/subscriptions"><i class="bi bi-star s-icon"></i><span>Pricing</span></a>
            <hr class="arena-divider" style="margin: var(--sp-3) var(--sp-5);">
            <a class="sidebar-item" href="/login"><i class="bi bi-box-arrow-in-right s-icon"></i><span>Sign In</span></a>
            <a class="sidebar-item" href="/register" style="color:var(--arena-accent);"><i class="bi bi-person-plus s-icon"></i><span>Join Free</span></a>
        </nav>
        <div style="padding: var(--sp-4) var(--sp-5); border-top:1px solid var(--arena-border);">
            <div class="lang-switcher" role="group" aria-label="Language">
                <button class="lang-btn active" data-lang="en">EN</button>
                <button class="lang-btn" data-lang="ar">AR</button>
            </div>
        </div>
    </div>

    <!-- Page Content -->
    <main id="main-content" tabindex="-1">
        @yield('content')
    </main>

    <!-- Footer -->
    @unless(isset($hideFooter) && $hideFooter)
    <footer class="arena-footer" role="contentinfo">
        <div class="container-arena">
            <div class="footer-grid">
                <!-- Brand column -->
                <div class="footer-brand">
                    <div class="brand-name">
                        <svg width="24" height="24" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <rect width="36" height="36" rx="8" fill="#00D4FF" fill-opacity="0.15"/>
                            <path d="M18 4L8 16H14L10 28H16L18 22L20 28H26L22 16H28L18 4Z" fill="#00D4FF"/>
                        </svg>
                        ALGA ARENA
                    </div>
                    <p class="footer-desc">The global esports operating system. Connect with players, join teams, compete in tournaments, and build your legacy.</p>
                    <div class="footer-socials">
                        <a href="#" class="footer-social" aria-label="Twitter/X"><i class="bi bi-twitter-x" aria-hidden="true"></i></a>
                        <a href="#" class="footer-social" aria-label="Discord"><i class="bi bi-discord" aria-hidden="true"></i></a>
                        <a href="#" class="footer-social" aria-label="YouTube"><i class="bi bi-youtube" aria-hidden="true"></i></a>
                        <a href="#" class="footer-social" aria-label="TikTok"><i class="bi bi-tiktok" aria-hidden="true"></i></a>
                        <a href="#" class="footer-social" aria-label="Instagram"><i class="bi bi-instagram" aria-hidden="true"></i></a>
                    </div>
                </div>

                <!-- Platform -->
                <div>
                    <p class="footer-col-title">Platform</p>
                    <ul class="footer-links">
                        <li><a href="/preview/games">Games</a></li>
                        <li><a href="/preview/players">Players</a></li>
                        <li><a href="/preview/teams">Teams</a></li>
                        <li><a href="/preview/tournaments">Tournaments</a></li>
                        <li><a href="/preview/rankings">Rankings</a></li>
                        <li><a href="/preview/scrims">Scrims</a></li>
                        <li><a href="/preview/recruitment">Recruitment</a></li>
                    </ul>
                </div>

                <!-- Community -->
                <div>
                    <p class="footer-col-title">Community</p>
                    <ul class="footer-links">
                        <li><a href="/preview/community">Feed</a></li>
                        <li><a href="/preview/transfer-market">Transfer Market</a></li>
                        <li><a href="/preview/verification">Verification</a></li>
                        <li><a href="#">Academy</a></li>
                        <li><a href="#">Store</a></li>
                        <li><a href="#">Discord</a></li>
                    </ul>
                </div>

                <!-- Company -->
                <div>
                    <p class="footer-col-title">Company</p>
                    <ul class="footer-links">
                        <li><a href="#">About</a></li>
                        <li><a href="#">Careers</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">Help Center</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Terms of Service</a></li>
                    </ul>
                </div>
            </div>

            <!-- Footer bottom -->
            <div class="footer-bottom">
                <p class="footer-copy">&copy; {{ date('Y') }} ALGA ARENA. All rights reserved.</p>
                <div style="display:flex; gap:var(--sp-5);">
                    <a href="#" class="footer-copy" style="text-decoration:none;">Privacy</a>
                    <a href="#" class="footer-copy" style="text-decoration:none;">Terms</a>
                    <a href="#" class="footer-copy" style="text-decoration:none;">Cookies</a>
                </div>
                <div class="lang-switcher">
                    <button class="lang-btn active" data-lang="en">EN</button>
                    <button class="lang-btn" data-lang="ar">AR</button>
                </div>
            </div>
        </div>
    </footer>
    @endunless

    <!-- GSAP CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- App JS -->
    <script src="{{ asset('assets/js/app.js') }}"></script>
    @stack('scripts')
</body>
</html>
