<!DOCTYPE html>
<html lang="<%= lang %>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title><%= t('docs.title') %> - <%= botName %></title>
    <meta name="description" content="<%= t('docs.subtitle') %> <%= botName %>">
    <link rel="icon" type="image/png" href="/images/transparent_toothlessssss.png">
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
    <link rel="preload" href="/Fonts/symbols_skyquake.ttf" as="font" type="font/ttf" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Tailwind CSS -->
    <link rel="stylesheet" href="/css/output.css">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" media="print" onload="this.media='all'">
    
    <style>
        @font-face {
            font-family: 'skyquakesymbols';
            src: url('/Fonts/symbols_skyquake.ttf') format('truetype');
            font-display: swap;
        }

        body {
            background: #1b1b1b;
            min-height: 100vh;
        }
        .text-accent { color: #F5F5DC; }
        .text-muted { color: #90EE90; }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 100px;
        }
        
        /* Sidebar sticky positioning */
        .docs-sidebar {
            position: sticky;
            top: 100px;
            max-height: calc(100vh - 120px);
            overflow-y: auto;
        }
        
        /* Language dropdown styles */
        .languages-dropdown {
            margin-top: 1rem;
        }
        
        .dropdown-toggle {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            background: rgba(144, 238, 144, 0.1);
            border: 1px solid rgba(144, 238, 144, 0.2);
            border-radius: 0.5rem;
            color: #90EE90;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            font-size: 0.875rem;
        }
        
        .dropdown-toggle:hover {
            background: rgba(144, 238, 144, 0.15);
            border-color: rgba(144, 238, 144, 0.3);
        }
        
        .dropdown-arrow {
            margin-left: auto;
            transition: transform 0.3s ease;
        }
        
        .dropdown-toggle.active .dropdown-arrow {
            transform: rotate(180deg);
        }
        
        .languages-list {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        
        .languages-list.active {
            max-height: 600px;
            margin-top: 0.75rem;
        }
        
        .languages-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 0.5rem;
            padding: 1rem;
            background: rgba(30, 30, 30, 0.6);
            border: 1px solid rgba(144, 238, 144, 0.1);
            border-radius: 0.5rem;
        }
        
        .language-item {
            padding: 0.5rem;
            background: rgba(144, 238, 144, 0.05);
            border-radius: 0.375rem;
            font-size: 0.8125rem;
            color: #90EE90;
        }
    </style>
</head>
<body class="text-white antialiased">
    <%- include('partials/nav', { activePage: 'docs' }) %>

    <!-- Docs Header -->
    <section class="pt-32 pb-12 lg:pt-40 lg:pb-16">
        <div class="max-w-[1400px] mx-auto px-6 lg:px-8">
            <div class="text-center mb-8">
                <h1 class="text-4xl lg:text-5xl font-bold mb-4 text-accent"><%= t('docs.title') %></h1>
                <p class="text-lg text-muted max-w-2xl mx-auto"><%= t('docs.subtitle') %> <%= botName %></p>
            </div>
        </div>
    </section>

    <!-- Docs Content -->
    <section class="pb-40">
        <div class="max-w-[1400px] mx-auto px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
                <!-- Sidebar -->
                <aside class="lg:col-span-3">
                    <div class="docs-sidebar bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                        <h3 class="text-sm font-bold text-accent uppercase tracking-wide mb-4"><%= t('docs.quickNavigation') %></h3>
                        <nav class="space-y-1">
                            <a href="#getting-started" class="block px-3 py-2 text-sm text-muted hover:text-accent hover:bg-white/5 rounded-lg transition-colors"><%= t('docs.gettingStarted') %></a>
                            <a href="#commands" class="block px-3 py-2 text-sm text-muted hover:text-accent hover:bg-white/5 rounded-lg transition-colors"><%= t('docs.commands') %></a>
                            <a href="#setup" class="block px-3 py-2 text-sm text-muted hover:text-accent hover:bg-white/5 rounded-lg transition-colors"><%= t('docs.serverSetup') %></a>
                            <a href="#premium" class="block px-3 py-2 text-sm text-muted hover:text-accent hover:bg-white/5 rounded-lg transition-colors"><%= t('nav.premium') %></a>
                            <a href="#features" class="block px-3 py-2 text-sm text-muted hover:text-accent hover:bg-white/5 rounded-lg transition-colors"><%= t('docs.features') %></a>
                            <a href="#examples" class="block px-3 py-2 text-sm text-muted hover:text-accent hover:bg-white/5 rounded-lg transition-colors"><%= t('docs.examples') %></a>
                            <a href="#troubleshooting" class="block px-3 py-2 text-sm text-muted hover:text-accent hover:bg-white/5 rounded-lg transition-colors"><%= t('docs.troubleshooting') %></a>
                            <a href="#stack-manager" class="block px-3 py-2 text-sm text-muted hover:text-accent hover:bg-white/5 rounded-lg transition-colors"><%= t('docs.stackManager') %></a>
                        </nav>
                    </div>
                </aside>

                <!-- Main Content -->
                <main class="lg:col-span-9">
                    <div class="space-y-20">
                        
                        <!-- Getting Started -->
                        <section id="getting-started" class="scroll-mt-24">
                            <h2 class="text-3xl font-bold text-accent mb-4 flex items-center">
                                <i class="fas fa-rocket mr-3"></i>
                                <%= t('docs.gettingStarted') %>
                            </h2>
                            <p class="text-muted text-lg mb-8"><%= t('docs.welcomeMessage') %></p>

                            <div class="space-y-6">
                                <!-- Step 1 -->
                                <div class="flex gap-4 bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                    <div class="flex-shrink-0">
                                        <div class="w-12 h-12 rounded-full bg-accent text-[#1E1E1E] font-bold flex items-center justify-center text-xl">1</div>
                                    </div>
                                    <div class="flex-1">
                                        <h4 class="text-xl font-semibold text-accent mb-2"><%= t('docs.inviteTheBot') %></h4>
                                        <p class="text-muted leading-relaxed"><%- t('docs.inviteBotDesc') %></p>
                                    </div>
                                </div>

                                <!-- Step 2 -->
                                <div class="flex gap-4 bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                    <div class="flex-shrink-0">
                                        <div class="w-12 h-12 rounded-full bg-accent text-[#1E1E1E] font-bold flex items-center justify-center text-xl">2</div>
                                    </div>
                                    <div class="flex-1">
                                        <h4 class="text-xl font-semibold text-accent mb-2"><%= t('docs.runSetupWizard') %></h4>
                                        <p class="text-muted leading-relaxed mb-4"><%= t('docs.setupWizardDesc') %></p>
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent">
                                            /setup
                                        </div>
                                        <p class="text-muted text-sm mt-3"><%= t('docs.setupEasiest') %></p>
                                    </div>
                                </div>

                                <!-- Step 3 -->
                                <div class="flex gap-4 bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                    <div class="flex-shrink-0">
                                        <div class="w-12 h-12 rounded-full bg-accent text-[#1E1E1E] font-bold flex items-center justify-center text-xl">3</div>
                                    </div>
                                    <div class="flex-1">
                                        <h4 class="text-xl font-semibold text-accent mb-2"><%= t('docs.youreDone') %></h4>
                                        <p class="text-muted leading-relaxed"><%- t('docs.doneDesc') %></p>
                                        <p class="text-muted text-sm mt-3"><%- t('docs.premiumNote') %></p>
                                    </div>
                                </div>

                                <!-- Alternative -->
                                <div class="flex gap-4 bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6 opacity-75">
                                    <div class="flex-shrink-0">
                                        <div class="w-12 h-12 rounded-full bg-[rgba(144,238,144,0.2)] text-accent font-bold flex items-center justify-center text-sm">ALT</div>
                                    </div>
                                    <div class="flex-1">
                                        <h4 class="text-xl font-semibold text-accent mb-2"><%= t('docs.manualSetup') %></h4>
                                        <p class="text-muted leading-relaxed mb-4"><%= t('docs.manualSetupDesc') %></p>
                                        <div class="space-y-2">
                                            <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent">
                                                /set-squadron YOUR_SQUADRON_NAME
                                            </div>
                                            <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent">
                                                /quick-log YOUR_SQUADRON_NAME Both
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- Commands -->
                        <section id="commands" class="scroll-mt-24">
                            <h2 class="text-3xl font-bold text-accent mb-4 flex items-center">
                                <i class="fas fa-terminal mr-3"></i>
                                <%= t('docs.commands') %>
                            </h2>
                            <p class="text-muted text-lg mb-8"><%- t('docs.allCommandsSlash') %></p>

                            <!-- Server Setup & Administration -->
                            <div class="mb-12">
                                <h3 class="text-2xl font-semibold text-accent mb-6"><%= t('docs.serverSetupAdmin') %></h3>
                                <div class="space-y-4">
                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /setup
                                        </div>
                                        <p class="text-muted leading-relaxed"><%- t('docs.setupDesc') %> <span class="text-accent font-semibold"><%= t('docs.recommendedForNew') %></span></p>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /set-squadron [short_name]
                                        </div>
                                        <p class="text-muted leading-relaxed mb-3"><%= t('docs.setSquadronDesc') %></p>
                                        <div class="text-sm">
                                            <span class="text-accent font-semibold"><%= t('docs.example') %>:</span>
                                            <code class="ml-2 px-2 py-1 bg-[rgba(0,0,0,0.4)] rounded text-accent">/set-squadron AVR</code>
                                        </div>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /quick-log [squadron_name] [type]
                                        </div>
                                        <p class="text-muted leading-relaxed mb-3"><%- t('docs.quickLogDesc') %></p>
                                        <p class="text-sm text-muted mb-3"><%- t('docs.quickLogPremiumNote') %></p>
                                        <div class="text-sm space-y-1">
                                            <div>
                                                <span class="text-accent font-semibold"><%= t('docs.example') %>:</span>
                                                <code class="ml-2 px-2 py-1 bg-[rgba(0,0,0,0.4)] rounded text-accent">/quick-log AVR</code>
                                            </div>
                                            <div>
                                                <span class="text-accent font-semibold"><%= t('docs.example') %>:</span>
                                                <code class="ml-2 px-2 py-1 bg-[rgba(0,0,0,0.4)] rounded text-accent">/quick-log AVR Points</code>
                                            </div>
                                            <div>
                                                <span class="text-accent font-semibold"><%= t('docs.example') %>:</span>
                                                <code class="ml-2 px-2 py-1 bg-[rgba(0,0,0,0.4)] rounded text-accent">/quick-log AVR Both</code>
                                            </div>
                                            <div>
                                                <span class="text-accent font-semibold"><%= t('docs.example') %>:</span>
                                                <code class="ml-2 px-2 py-1 bg-[rgba(0,0,0,0.4)] rounded text-accent">/quick-log AVR "Weekly BR"</code>
                                            </div>
                                            <div>
                                                <span class="text-accent font-semibold"><%= t('docs.example') %>:</span>
                                                <code class="ml-2 px-2 py-1 bg-[rgba(0,0,0,0.4)] rounded text-accent">/quick-log "" "Weekly BR"</code>
                                            </div>
                                        </div>
                                        <p class="text-sm text-muted mt-3">
                                            <strong class="text-accent">Weekly BR Report:</strong>
                                            Fires at the end of each BR rotation (~10 min after the BR window closes).
                                            With a squadron name, posts the top 15 players for that squadron.
                                            With an empty squadron field (or <code>*</code>), posts the top 20 squadrons
                                            of the week with their top 5 players each. Free for all servers.
                                        </p>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /autolog-management
                                        </div>
                                        <p class="text-muted leading-relaxed"><%- t('docs.autologDesc') %> <%- t('docs.autologPremiumNote') %></p>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /diagnose-perms
                                        </div>
                                        <p class="text-muted leading-relaxed"><%= t('docs.diagnosePermsDesc') %></p>
                                    </div>
                                </div>
                            </div>

                            <!-- Squadron Information -->
                            <div class="mb-12">
                                <h3 class="text-2xl font-semibold text-accent mb-6"><%= t('docs.squadronInformation') %></h3>
                                <div class="space-y-4">
                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /sq-info [squadron]
                                        </div>
                                        <p class="text-muted leading-relaxed mb-3"><%= t('docs.sqInfoDesc') %></p>
                                        <div class="text-sm">
                                            <span class="text-accent font-semibold"><%= t('docs.example') %>:</span>
                                            <code class="ml-2 px-2 py-1 bg-[rgba(0,0,0,0.4)] rounded text-accent">/sq-info AVR</code>
                                        </div>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /sq-info-graph [squadron]
                                        </div>
                                        <p class="text-muted leading-relaxed mb-3"><%= t('docs.sqInfoGraphDesc') %></p>
                                        <div class="text-sm">
                                            <span class="text-accent font-semibold"><%= t('docs.example') %>:</span>
                                            <code class="ml-2 px-2 py-1 bg-[rgba(0,0,0,0.4)] rounded text-accent">/sq-info-graph AVR</code>
                                        </div>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /comp [squadron_name]
                                        </div>
                                        <p class="text-muted leading-relaxed mb-3"><%= t('docs.compDesc') %></p>
                                        <div class="text-sm">
                                            <span class="text-accent font-semibold"><%= t('docs.example') %>:</span>
                                            <code class="ml-2 px-2 py-1 bg-[rgba(0,0,0,0.4)] rounded text-accent">/comp AXYS</code>
                                        </div>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /sq-track [squadron]
                                        </div>
                                        <p class="text-muted leading-relaxed mb-3"><%= t('docs.trackDesc') %></p>
                                        <div class="text-sm">
                                            <span class="text-accent font-semibold"><%= t('docs.example') %>:</span>
                                            <code class="ml-2 px-2 py-1 bg-[rgba(0,0,0,0.4)] rounded text-accent">/sq-track 0NYX</code>
                                        </div>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /top
                                        </div>
                                        <p class="text-muted leading-relaxed"><%= t('docs.topDesc') %></p>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /sq-stats [squadron]
                                        </div>
                                        <p class="text-muted leading-relaxed"><%= t('docs.sqStatsDesc') %></p>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /loss-calculator [player] [squadron]
                                        </div>
                                        <p class="text-muted leading-relaxed"><%= t('docs.lossCalculatorDesc') %></p>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /recent [squadron]
                                        </div>
                                        <p class="text-muted leading-relaxed"><%= t('docs.recentDesc') %></p>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /analytics [squadron] [view]
                                        </div>
                                        <p class="text-muted leading-relaxed"><%= t('docs.analyticsDesc') %></p>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /sq-card [season] [squadron] [theme]
                                        </div>
                                        <p class="text-muted leading-relaxed mb-3"><%= t('docs.sqCardDesc') %></p>
                                        <div class="text-sm">
                                            <span class="text-accent font-semibold"><%= t('docs.example') %>:</span>
                                            <code class="ml-2 px-2 py-1 bg-[rgba(0,0,0,0.4)] rounded text-accent">/sq-card 2026-II AVR</code>
                                        </div>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /vs [squadron]
                                        </div>
                                        <p class="text-muted leading-relaxed"><%= t('docs.vsDesc') %></p>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /leaderboard
                                        </div>
                                        <p class="text-muted leading-relaxed"><%= t('docs.leaderboardLinkDesc') %></p>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /query [query]
                                        </div>
                                        <p class="text-muted leading-relaxed"><%= t('docs.queryDesc') %></p>
                                    </div>
                                </div>
                            </div>

                            <!-- Player Stats -->
                            <div class="mb-12">
                                <h3 class="text-2xl font-semibold text-accent mb-6"><%= t('docs.playerStats') %></h3>
                                <div class="space-y-4">
                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /player-stats [username]
                                        </div>
                                        <p class="text-muted leading-relaxed mb-3"><%= t('docs.playerStatsDesc') %></p>
                                        <div class="text-sm">
                                            <span class="text-accent font-semibold"><%= t('docs.example') %>:</span>
                                            <code class="ml-2 px-2 py-1 bg-[rgba(0,0,0,0.4)] rounded text-accent">/player-stats Frovy</code>
                                        </div>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /view-player-games [username]
                                        </div>
                                        <p class="text-muted leading-relaxed mb-3"><%= t('docs.viewPlayerGamesDesc') %></p>
                                        <div class="text-sm">
                                            <span class="text-accent font-semibold"><%= t('docs.example') %>:</span>
                                            <code class="ml-2 px-2 py-1 bg-[rgba(0,0,0,0.4)] rounded text-accent">/view-player-games Frovy</code>
                                        </div>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /card [season] [player] [theme]
                                        </div>
                                        <p class="text-muted leading-relaxed mb-3"><%= t('docs.cardDesc') %></p>
                                        <div class="text-sm">
                                            <span class="text-accent font-semibold"><%= t('docs.example') %>:</span>
                                            <code class="ml-2 px-2 py-1 bg-[rgba(0,0,0,0.4)] rounded text-accent">/card 2026-II Frovy</code>
                                        </div>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /view-match [match_id] or [player_name]
                                        </div>
                                        <p class="text-muted leading-relaxed mb-3"><%- t('docs.viewMatchDesc') %></p>
                                        <div class="text-sm">
                                            <span class="text-accent font-semibold"><%= t('docs.examples2') %>:</span>
                                            <code class="ml-2 px-2 py-1 bg-[rgba(0,0,0,0.4)] rounded text-accent">/view-match match_id:abc123</code>
                                            <code class="ml-2 px-2 py-1 bg-[rgba(0,0,0,0.4)] rounded text-accent">/view-match player_name:Frovy</code>
                                        </div>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /compare [player1] [player2] ... [player7]
                                        </div>
                                        <p class="text-muted leading-relaxed mb-3"><%= t('docs.compareDesc') %></p>
                                        <div class="text-sm">
                                            <span class="text-accent font-semibold"><%= t('docs.example') %>:</span>
                                            <code class="ml-2 px-2 py-1 bg-[rgba(0,0,0,0.4)] rounded text-accent">/compare Frovy NotSoGroomless</code>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Meta -->
                            <div class="mb-12">
                                <h3 class="text-2xl font-semibold text-accent mb-6"><%= t('docs.metaData') %></h3>
                                <div class="space-y-4">
                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /meta-management
                                        </div>
                                        <p class="text-muted leading-relaxed"><%= t('docs.metaManagementDesc') %></p>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /meta [vehicle]
                                        </div>
                                        <p class="text-muted leading-relaxed"><%= t('docs.metaDesc') %></p>
                                    </div>
                                </div>
                            </div>

                            <!-- Settings & Utilities -->
                            <div class="mb-12">
                                <h3 class="text-2xl font-semibold text-accent mb-6"><%= t('docs.settingsUtilities') %></h3>
                                <div class="space-y-4">
                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /language
                                        </div>
                                        <p class="text-muted leading-relaxed"><%= t('docs.languageDesc') %></p>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /schedule
                                        </div>
                                        <p class="text-muted leading-relaxed"><%= t('docs.scheduleDesc') %></p>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /website
                                        </div>
                                        <p class="text-muted leading-relaxed"><%= t('docs.websiteDesc') %></p>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /credits
                                        </div>
                                        <p class="text-muted leading-relaxed"><%= t('docs.creditsDesc') %></p>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.15)] rounded-xl p-6">
                                        <div class="flex items-center gap-3 mb-4">
                                            <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg px-4 py-3 font-mono text-sm text-accent flex-1">
                                                /unlock
                                            </div>
                                            <span class="flex-shrink-0 px-2 py-1 bg-yellow-400/10 border border-yellow-400/30 text-yellow-400 text-xs font-semibold rounded-lg"><i class="fas fa-crown mr-1"></i><%= t('docs.premiumBadge') %></span>
                                        </div>
                                        <p class="text-muted leading-relaxed"><%- t('docs.unlockDesc') %></p>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /news
                                        </div>
                                        <p class="text-muted leading-relaxed"><%= t('docs.newsDesc') %></p>
                                    </div>
                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /donate
                                        </div>
                                        <p class="text-muted leading-relaxed"><%= t('docs.donateDesc') %></p>
                                    </div>
                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /bot-status
                                        </div>
                                        <p class="text-muted leading-relaxed"><%= t('docs.botStatusDesc') %></p>
                                    </div>
                                </div>
                            </div>

                            <!-- Voice Channel Tally -->
                            <div class="mb-12">
                                <h3 class="text-2xl font-semibold text-accent mb-6"><%= t('docs.voiceChannelTally') %></h3>
                                <p class="text-muted leading-relaxed mb-6"><%= t('docs.tallyIntro') %></p>
                                <div class="space-y-4">
                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /tally-claim [username] [squadron]
                                        </div>
                                        <p class="text-muted leading-relaxed mb-3"><%= t('docs.tallyClaimDesc') %></p>
                                        <div class="text-sm space-y-1">
                                            <div>
                                                <span class="text-accent font-semibold"><%= t('docs.example') %>:</span>
                                                <code class="ml-2 px-2 py-1 bg-[rgba(0,0,0,0.4)] rounded text-accent">/tally-claim username:PlayerName</code>
                                            </div>
                                            <div>
                                                <span class="text-accent font-semibold"><%= t('docs.example') %>:</span>
                                                <code class="ml-2 px-2 py-1 bg-[rgba(0,0,0,0.4)] rounded text-accent">/tally-claim squadron:DSPL</code>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /tally-transfer [username]
                                        </div>
                                        <p class="text-muted leading-relaxed"><%= t('docs.tallyTransferDesc') %></p>
                                    </div>

                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /tally-clear
                                        </div>
                                        <p class="text-muted leading-relaxed"><%= t('docs.tallyClearDesc') %></p>
                                    </div>
                                </div>
                            </div>

                            <!-- Stack Manager -->
                            <div class="mb-12" id="stack-manager">
                                <h3 class="text-2xl font-semibold text-accent mb-6"><%= t('docs.stackManager') %></h3>
                                <div class="space-y-4">
                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /stack-create [vehicle]
                                        </div>
                                        <p class="text-muted leading-relaxed mb-4"><%= t('docs.stackCreateDesc') %></p>
                                        <div class="space-y-2 text-sm text-muted">
                                            <p><%- t('docs.stackRequestToJoin') %></p>
                                            <p><%- t('docs.stackLeaveWithdraw') %></p>
                                            <p><%- t('docs.stackManagePanel') %></p>
                                            <ul class="list-disc list-inside ml-4 space-y-1">
                                                <li><%- t('docs.stackAcceptMembers') %></li>
                                                <li><%- t('docs.stackRemoveMembers') %></li>
                                                <li><%- t('docs.stackPingMembers') %></li>
                                                <li><%- t('docs.stackRenameStack') %></li>
                                            </ul>
                                            <p><%- t('docs.stackDisbandStack') %></p>
                                        </div>
                                    </div>
                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            /stack-manage
                                        </div>
                                        <p class="text-muted leading-relaxed"><%= t('docs.stackManageDesc') %></p>
                                    </div>
                                </div>
                            </div>

                            <!-- Translation -->
                            <div class="mb-12">
                                <h3 class="text-2xl font-semibold text-accent mb-6"><%= t('docs.translation') %></h3>
                                <div class="space-y-4">
                                    <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                        <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-4 font-mono text-sm text-accent mb-4">
                                            <%= t('docs.translateContextMenu') %>
                                        </div>
                                        <p class="text-muted leading-relaxed mb-3"><%= t('docs.translateDesc') %></p>

                                        <div class="languages-dropdown">
                                            <button class="dropdown-toggle" onclick="toggleLanguagesList()">
                                                <i class="fas fa-globe"></i> <%= t('docs.viewAllLanguages') %>
                                                <i class="fas fa-chevron-down dropdown-arrow"></i>
                                            </button>
                                            <div class="languages-list" id="languagesList">
                                                <div class="languages-grid">
                                                    <div class="language-item">🇷🇺 Russian</div>
                                                    <div class="language-item">🇺🇸 English (US)</div>
                                                    <div class="language-item">🇬🇧 English (UK)</div>
                                                    <div class="language-item">🇪🇸 Spanish</div>
                                                    <div class="language-item">🇫🇷 French</div>
                                                    <div class="language-item">🇩🇪 German</div>
                                                    <div class="language-item">🇨🇳 Chinese (Simplified)</div>
                                                    <div class="language-item">🇯🇵 Japanese</div>
                                                    <div class="language-item">🇰🇷 Korean</div>
                                                    <div class="language-item">🇮🇹 Italian</div>
                                                    <div class="language-item">🇵🇹 Portuguese (Portugal)</div>
                                                    <div class="language-item">🇧🇷 Portuguese (Brazil)</div>
                                                    <div class="language-item">🇵🇱 Polish</div>
                                                    <div class="language-item">🇱🇹 Lithuanian</div>
                                                    <div class="language-item">🇱🇻 Latvian</div>
                                                    <div class="language-item">🇪🇪 Estonian</div>
                                                    <div class="language-item">🇩🇰 Danish</div>
                                                    <div class="language-item">🇫🇮 Finnish</div>
                                                    <div class="language-item">🇮🇩 Indonesian</div>
                                                    <div class="language-item">🇳🇴 Norwegian</div>
                                                    <div class="language-item">🇳🇱 Dutch</div>
                                                    <div class="language-item">🇸🇪 Swedish</div>
                                                    <div class="language-item">🇺🇦 Ukrainian</div>
                                                    <div class="language-item">🇨🇿 Czech</div>
                                                    <div class="language-item">🇸🇰 Slovak</div>
                                                    <div class="language-item">🇸🇮 Slovenian</div>
                                                    <div class="language-item">🇷🇴 Romanian</div>
                                                    <div class="language-item">🇧🇬 Bulgarian</div>
                                                    <div class="language-item">🇬🇷 Greek</div>
                                                    <div class="language-item">🇭🇺 Hungarian</div>
                                                    <div class="language-item">🇸🇦 Arabic</div>
                                                    <div class="language-item">🇹🇷 Turkish</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- Server Setup -->
                        <section id="setup" class="scroll-mt-24">
                            <h2 class="text-3xl font-bold text-accent mb-4 flex items-center">
                                <i class="fas fa-cog mr-3"></i>
                                <%= t('docs.serverSetup') %>
                            </h2>
                            <p class="text-muted text-lg mb-8"><%= t('docs.serverSetupSubtitle').replace('{botName}', botName) %></p>

                            <div class="space-y-6">
                                <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                    <h4 class="text-xl font-semibold text-accent mb-4"><%= t('docs.requiredPermissions') %></h4>
                                    <ul class="space-y-2 text-muted list-disc list-inside">
                                        <li><%= t('docs.sendMessages') %></li>
                                        <li><%= t('docs.useSlashCommands') %></li>
                                        <li><%= t('docs.embedLinks') %></li>
                                        <li><%= t('docs.readMessageHistory') %></li>
                                    </ul>
                                </div>

                                <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                    <h4 class="text-xl font-semibold text-accent mb-4"><%= t('docs.recommendedChannelSetup') %></h4>
                                    <p class="text-muted leading-relaxed"><%- t('docs.recommendedChannelDesc') %></p>
                                </div>

                                <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                    <h4 class="text-xl font-semibold text-accent mb-4"><%= t('docs.roleConfiguration') %></h4>
                                    <p class="text-muted leading-relaxed"><%= t('docs.roleConfigurationDesc') %></p>
                                </div>
                            </div>
                        </section>

                        <!-- Premium -->
                        <section id="premium" class="scroll-mt-24">
                            <h2 class="text-3xl font-bold text-accent mb-4 flex items-center">
                                <i class="fas fa-crown mr-3 text-yellow-400"></i>
                                <%= t('nav.premium') %>
                            </h2>
                            <p class="text-muted text-lg mb-8"><%= t('docs.premiumSectionSubtitle') %></p>

                            <div class="space-y-6">
                                <div class="bg-[rgba(44,44,44,0.3)] border border-yellow-400/20 rounded-xl p-6">
                                    <h4 class="text-xl font-semibold text-accent mb-3"><%= t('docs.whatsIncluded') %></h4>
                                    <ul class="space-y-2 text-muted list-disc list-inside">
                                        <li><%= t('docs.premiumInclude1') %></li>
                                        <li><%= t('docs.premiumInclude2') %></li>
                                        <li><%= t('docs.premiumInclude3') %></li>
                                    </ul>
                                </div>

                                <div class="bg-[rgba(44,44,44,0.3)] border border-yellow-400/20 rounded-xl p-6">
                                    <h4 class="text-xl font-semibold text-accent mb-3"><%= t('docs.tierOverview') %></h4>
                                    <p class="text-muted leading-relaxed mb-4"><%= t('docs.tierOverviewDesc') %></p>
                                    <ul class="space-y-2 text-muted list-disc list-inside">
                                        <li><strong class="text-accent">Standard</strong> — <%= t('docs.tierStandardLine') %></li>
                                        <li><strong class="text-accent">Pro</strong> — <%= t('docs.tierProLine') %></li>
                                        <li><strong class="text-accent">Max</strong> — <%= t('docs.tierMaxLine') %></li>
                                    </ul>
                                </div>

                                <div class="bg-[rgba(44,44,44,0.3)] border border-yellow-400/20 rounded-xl p-6">
                                    <h4 class="text-xl font-semibold text-accent mb-3"><%= t('docs.pricingBilling') %></h4>
                                    <p class="text-muted leading-relaxed"><%- t('docs.pricingBillingDesc') %></p>
                                </div>

                                <div class="bg-[rgba(44,44,44,0.3)] border border-yellow-400/20 rounded-xl p-6">
                                    <h4 class="text-xl font-semibold text-accent mb-3"><%= t('docs.howToSubscribe') %></h4>
                                    <ol class="space-y-2 text-muted list-decimal list-inside">
                                        <li><%- t('docs.subscribe1') %></li>
                                        <li><%= t('docs.subscribe2') %></li>
                                        <li><%= t('docs.subscribe3') %></li>
                                    </ol>
                                </div>

                                <div class="bg-[rgba(44,44,44,0.3)] border border-yellow-400/20 rounded-xl p-6">
                                    <h4 class="text-xl font-semibold text-accent mb-3"><%= t('docs.cancellation') %></h4>
                                    <p class="text-muted leading-relaxed"><%= t('docs.cancellationDesc') %></p>
                                </div>
                            </div>
                        </section>

                        <!-- Features -->
                        <section id="features" class="scroll-mt-24">
                            <h2 class="text-3xl font-bold text-accent mb-8 flex items-center">
                                <i class="fas fa-star mr-3"></i>
                                <%= t('docs.features') %>
                            </h2>

                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                                <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6 text-center">
                                    <i class="fas fa-chart-line text-accent text-4xl mb-4"></i>
                                    <h4 class="text-lg font-semibold text-accent mb-2"><%= t('docs.realTimeStatistics') %></h4>
                                    <p class="text-muted text-sm"><%= t('docs.realTimeStatisticsDesc') %></p>
                                </div>

                                <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6 text-center">
                                    <i class="fas fa-history text-accent text-4xl mb-4"></i>
                                    <h4 class="text-lg font-semibold text-accent mb-2"><%= t('docs.battleHistory') %></h4>
                                    <p class="text-muted text-sm"><%= t('docs.battleHistoryDesc') %></p>
                                </div>

                                <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6 text-center">
                                    <i class="fas fa-trophy text-accent text-4xl mb-4"></i>
                                    <h4 class="text-lg font-semibold text-accent mb-2"><%= t('docs.leaderboardsFeature') %></h4>
                                    <p class="text-muted text-sm"><%= t('docs.leaderboardsFeatureDesc') %></p>
                                </div>

                                <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6 text-center">
                                    <i class="fas fa-users text-accent text-4xl mb-4"></i>
                                    <h4 class="text-lg font-semibold text-accent mb-2"><%= t('docs.playerTracking') %></h4>
                                    <p class="text-muted text-sm"><%= t('docs.playerTrackingDesc') %></p>
                                </div>

                                <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6 text-center">
                                    <i class="fas fa-bell text-accent text-4xl mb-4"></i>
                                    <h4 class="text-lg font-semibold text-accent mb-2"><%= t('docs.smartAlerts') %></h4>
                                    <p class="text-muted text-sm"><%= t('docs.smartAlertsDesc') %></p>
                                </div>

                                <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6 text-center">
                                    <i class="fas fa-language text-accent text-4xl mb-4"></i>
                                    <h4 class="text-lg font-semibold text-accent mb-2"><%= t('docs.multiLanguageSupport') %></h4>
                                    <p class="text-muted text-sm"><%= t('docs.multiLanguageSupportDesc') %></p>
                                </div>

                                <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6 text-center">
                                    <i class="fas fa-image text-accent text-4xl mb-4"></i>
                                    <h4 class="text-lg font-semibold text-accent mb-2"><%= t('docs.seasonRecapCardTitle') %></h4>
                                    <p class="text-muted text-sm"><%= t('docs.seasonRecapCardDesc') %></p>
                                </div>

                                <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6 text-center">
                                    <i class="fas fa-user-astronaut text-accent text-4xl mb-4"></i>
                                    <h4 class="text-lg font-semibold text-accent mb-2"><%= t('docs.playerRecapCardTitle') %></h4>
                                    <p class="text-muted text-sm"><%= t('docs.playerRecapCardDesc') %></p>
                                </div>

                                <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6 text-center">
                                    <i class="fas fa-clock text-accent text-4xl mb-4"></i>
                                    <h4 class="text-lg font-semibold text-accent mb-2"><%= t('docs.timeCoordination') %></h4>
                                    <p class="text-muted text-sm"><%= t('docs.timeCoordinationDesc') %></p>
                                </div>

                                <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6 text-center">
                                    <i class="fas fa-search text-accent text-4xl mb-4"></i>
                                    <h4 class="text-lg font-semibold text-accent mb-2"><%= t('docs.advancedSearch') %></h4>
                                    <p class="text-muted text-sm"><%= t('docs.advancedSearchDesc') %></p>
                                </div>

                                <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6 text-center">
                                    <i class="fas fa-shield-alt text-accent text-4xl mb-4"></i>
                                    <h4 class="text-lg font-semibold text-accent mb-2"><%= t('docs.dataSecurity') %></h4>
                                    <p class="text-muted text-sm"><%= t('docs.dataSecurityDesc') %></p>
                                </div>
                            </div>
                        </section>

                        <!-- Examples -->
                        <section id="examples" class="scroll-mt-24">
                            <h2 class="text-3xl font-bold text-accent mb-8 flex items-center">
                                <i class="fas fa-code mr-3"></i>
                                <%= t('docs.usageExamples') %>
                            </h2>

                            <div class="space-y-6">
                                <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                    <h4 class="text-xl font-semibold text-accent mb-4"><%= t('docs.quickSetupRecommended') %></h4>
                                    <div class="space-y-3">
                                        <div>
                                            <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-3 font-mono text-sm text-accent mb-2">
                                                /setup
                                            </div>
                                            <p class="text-muted text-sm"><%= t('docs.quickSetupDesc') %></p>
                                        </div>
                                    </div>
                                </div>

                                <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                    <h4 class="text-xl font-semibold text-accent mb-4"><%= t('docs.comparingPlayers') %></h4>
                                    <div class="space-y-3">
                                        <div>
                                            <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-3 font-mono text-sm text-accent mb-2">
                                                /compare Frovy NotSoGroomless OwaArtin
                                            </div>
                                            <p class="text-muted text-sm"><%= t('docs.comparingPlayersDesc') %></p>
                                        </div>
                                    </div>
                                </div>

                                <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                    <h4 class="text-xl font-semibold text-accent mb-4"><%= t('docs.checkingSquadronInfo') %></h4>
                                    <div class="space-y-3">
                                        <div>
                                            <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-3 font-mono text-sm text-accent mb-2">
                                                /sq-info AVR
                                            </div>
                                            <p class="text-muted text-sm"><%= t('docs.verifySquadronDesc') %></p>
                                        </div>
                                        <div>
                                            <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-3 font-mono text-sm text-accent mb-2">
                                                /recent AVR
                                            </div>
                                            <p class="text-muted text-sm"><%= t('docs.recentBattlesDesc') %></p>
                                        </div>
                                        <div>
                                            <div class="bg-[rgba(0,0,0,0.4)] border border-[rgba(144,238,144,0.15)] rounded-lg p-3 font-mono text-sm text-accent mb-2">
                                                /vs 0NYX
                                            </div>
                                            <p class="text-muted text-sm"><%= t('docs.headToHeadDesc') %></p>
                                        </div>
                                    </div>
                                </div>

                                <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                    <h4 class="text-xl font-semibold text-accent mb-4"><%= t('docs.importantNote') %></h4>
                                    <p class="text-muted leading-relaxed mb-3"><%- t('docs.verifyFirst') %></p>
                                    <p class="text-muted leading-relaxed"><%- t('docs.cantFindSquadron') %></p>
                                </div>
                            </div>
                        </section>

                        <!-- Troubleshooting -->
                        <section id="troubleshooting" class="scroll-mt-24 pb-12">
                            <h2 class="text-3xl font-bold text-accent mb-8 flex items-center">
                                <i class="fas fa-wrench mr-3"></i>
                                <%= t('docs.troubleshooting') %>
                            </h2>

                            <div class="space-y-6">
                                <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                    <h4 class="text-xl font-semibold text-accent mb-4"><%= t('docs.botNotResponding') %></h4>
                                    <ul class="space-y-2 text-muted list-disc list-inside">
                                        <li><%= t('docs.checkOnline') %></li>
                                        <li><%= t('docs.verifyPermissions') %></li>
                                        <li><%= t('docs.tryDifferentChannel') %></li>
                                    </ul>
                                </div>

                                <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                    <h4 class="text-xl font-semibold text-accent mb-4"><%= t('docs.commandsNotWorking') %></h4>
                                    <ul class="space-y-2 text-muted list-disc list-inside">
                                        <li><%- t('docs.ensureSlash') %></li>
                                        <li><%= t('docs.checkRolePerms') %></li>
                                        <li><%= t('docs.tryRefreshing') %></li>
                                    </ul>
                                </div>

                                <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl p-6">
                                    <h4 class="text-xl font-semibold text-accent mb-4"><%= t('docs.dataNotSaving') %></h4>
                                    <ul class="space-y-2 text-muted list-disc list-inside">
                                        <li><%- t('docs.verifySendMessages') %></li>
                                        <li><%= t('docs.checkOutages') %></li>
                                        <li><%= t('docs.contactSupport') %></li>
                                    </ul>
                                </div>
                            </div>
                        </section>

                        <!-- Support Section -->
                        <div class="bg-[rgba(44,44,44,0.3)] border border-[rgba(144,238,144,0.1)] rounded-xl px-12 py-12 text-center !mt-32 mb-12">
                            <h3 class="text-2xl font-bold text-accent mb-6"><%= t('docs.needMoreHelp') %></h3>
                            <p class="text-muted mb-10"><%= t('docs.needMoreHelpDesc') %></p>
                            <div class="flex flex-wrap justify-center gap-6">
                                <a href="/" class="btn-primary px-6 py-3 rounded-lg inline-flex items-center">
                                    <i class="fas fa-home mr-2"></i>
                                    <%= t('docs.backToHome') %>
                                </a>
                                <a href="/terms" class="px-6 py-3 rounded-lg border border-accent text-accent hover:bg-accent hover:text-[#1E1E1E] transition-all inline-flex items-center">
                                    <i class="fas fa-file-contract mr-2"></i>
                                    <%= t('docs.termsAndPrivacy') %>
                                </a>
                            </div>
                        </div>

                    </div>
                </main>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <%- include('partials/footer') %>

    <script>
        window.__lang = '<%= lang %>';
        window.__i18n = <%- localeJson %>;
        window.__t = function(key) {
            var parts = key.split('.'), obj = window.__i18n;
            for (var i = 0; i < parts.length; i++) { obj = obj && obj[parts[i]]; }
            return obj !== undefined ? obj : key;
        };
        window.switchLanguage = function(lang) {
            var next = lang || (document.documentElement.lang === 'en' ? 'ru' : 'en');
            if (next === document.documentElement.lang) return;
            document.cookie = 'lang=' + next + ';path=/;max-age=31536000;SameSite=Lax';
            window.location.reload();
        };
    </script>
    <script src="/js/main.js?v=3"></script>
    <script src="/js/api-client.js"></script>
    <script>
        // Language dropdown toggle
        function toggleLanguagesList() {
            const list = document.getElementById('languagesList');
            const button = document.querySelector('.dropdown-toggle');
            list.classList.toggle('active');
            button.classList.toggle('active');
        }
    </script>
</body>
</html>
