<style>
#langDropdown .hidden-dropdown { display: none; }
#langDropdown.open .hidden-dropdown { display: block; }

/* Bot product switcher — horizontal slider */
#botSwitcher .switcher-panel {
    opacity: 0;
    width: 0;
    max-width: 0;
    overflow: hidden;
    pointer-events: none;
    transition: width 320ms cubic-bezier(.2,.9,.25,1), max-width 320ms cubic-bezier(.2,.9,.25,1), opacity 220ms ease 40ms;
}
#botSwitcher.open .switcher-panel {
    opacity: 1;
    width: 440px;
    max-width: 440px;
    pointer-events: auto;
}
#botSwitcher .switcher-chevron { transition: transform 280ms cubic-bezier(.2,.9,.25,1); color: rgba(255,255,255,0.35); }
#botSwitcher.open .switcher-chevron { transform: rotate(-90deg); color: #90EE90; }
#botSwitcher .switcher-trigger:hover .switcher-chevron { color: #90EE90; }

.switcher-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 88px;
    display: flex;
    align-items: stretch;
    text-decoration: none;
    overflow: visible;
    transform: translateX(0);
    opacity: 0;
    transition: opacity 380ms ease 120ms, transform 380ms cubic-bezier(.2,.9,.25,1) 120ms, filter 220ms ease;
}
#botSwitcher .switcher-card.card-tss { transform: translateX(-14px); }
#botSwitcher .switcher-card.card-sre { transform: translateX(14px); }
#botSwitcher.open .switcher-card { opacity: 1; transform: translateX(0); }
.switcher-card-inner {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color 200ms ease;
}
.switcher-card.card-tss .switcher-card-inner { flex-direction: row; padding: 10px 0 10px 26px; }
.switcher-card.card-sre .switcher-card-inner { flex-direction: row-reverse; padding: 10px 26px 10px 0; }
.switcher-card:hover .switcher-card-inner { background: rgba(255,255,255,0.04); }

.switcher-pfp {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    border: 1px solid transparent;
    object-fit: cover;
    transition: transform 320ms cubic-bezier(.2,.9,.25,1), box-shadow 320ms ease;
}
.switcher-card.card-tss .switcher-pfp {
    margin-right: -1px;
    border-color: rgba(255,157,0,0.35);
    border-right: 0;
    border-radius: 14px 0 0 14px;
    box-shadow: 0 0 18px -4px rgba(255,157,0,0.45);
}
.switcher-card.card-sre .switcher-pfp {
    margin-left: -1px;
    border-color: rgba(144,238,144,0.35);
    border-left: 0;
    border-radius: 0 14px 14px 0;
    box-shadow: none;
}

.switcher-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.switcher-card.card-tss .switcher-text { text-align: left; }
.switcher-card.card-sre .switcher-text { text-align: right; }
.switcher-card.card-tss .switcher-title,
.switcher-card.card-tss .switcher-sub { padding-left: 4px; }
.switcher-card.card-sre .switcher-title,
.switcher-card.card-sre .switcher-sub { padding-right: 4px; }
.switcher-title {
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #fff;
    line-height: 1;
}
.switcher-card.card-tss .switcher-title {
    background: linear-gradient(95deg,#fff7e8,#ffdca3 58%,#fffdf8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.switcher-card.card-sre .switcher-title {
    background: linear-gradient(265deg,#90EE90,#d8ffd8 70%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.switcher-sub {
    margin-top: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.4);
}
.switcher-card.card-tss .switcher-pip,
.switcher-card.card-sre .switcher-pip {
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 999px;
    vertical-align: middle;
    margin: 0 6px;
}
.switcher-card.card-tss .switcher-pip { background: #ff9d00; box-shadow: 0 0 6px #ff9d00; }
.switcher-card.card-sre .switcher-pip { background: #90EE90; box-shadow: 0 0 6px #90EE90; }

</style>
<!-- Navigation Bar -->
<nav class="fixed top-0 left-0 right-0 bg-[#1E1E1E]/98 backdrop-blur-md border-b border-white/5" style="z-index: 1000;">
    <div class="w-full px-6 lg:px-8">
        <div class="flex items-center h-16">
            <!-- Left: Product switcher -->
            <div class="relative flex-shrink-0" id="botSwitcher">
                <button type="button" onclick="document.getElementById('botSwitcher').classList.toggle('open')" class="switcher-trigger flex items-center space-x-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#90EE90]/40 rounded-md -ml-1 pl-1 pr-2 py-1" aria-haspopup="menu" aria-label="Switch bot">
                    <img src="/images/toothless_server.gif" alt="<%= botName %>" class="h-8 w-auto" width="32" height="32">
                    <span class="text-lg font-semibold whitespace-nowrap"><span class="text-[#90EE90]">Toothless</span> <span class="text-accent">SREBOT</span></span>
                    <i class="fas fa-chevron-down switcher-chevron text-[10px] ml-0.5"></i>
                </button>
                <div class="switcher-panel absolute left-0 top-full mt-2 bg-[#141414] border border-white/10 rounded-2xl shadow-2xl shadow-black/70" style="z-index: 200;" role="menu" aria-label="Bot switcher">
                    <div class="flex items-stretch h-[88px] w-[440px]">
                        <a href="https://tss.pawjob.us" class="switcher-card card-tss" role="menuitem" aria-label="Switch to Toothless TSS Bot">
                            <div class="switcher-card-inner">
                                <div class="switcher-text">
                                    <span class="switcher-title">TSS</span>
                                    <span class="switcher-sub"><span class="switcher-pip"></span>tssbot</span>
                                </div>
                                <img src="/images/light_fury_match.jpg" alt="Light Fury" class="switcher-pfp" width="56" height="56">
                            </div>
                        </a>
                        <a href="/" class="switcher-card card-sre" role="menuitem" aria-current="page" aria-label="Toothless SREBOT (current)">
                            <div class="switcher-card-inner">
                                <div class="switcher-text">
                                    <span class="switcher-title">SRE</span>
                                    <span class="switcher-sub">srebot<span class="switcher-pip"></span></span>
                                </div>
                                <img src="/images/toothless_match.jpg" alt="Toothless" class="switcher-pfp" width="56" height="56">
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <!-- Center: Nav links -->
            <div class="hidden lg:flex items-center justify-center flex-1 space-x-6">
                <% const navLinks = [
                    { href: '/', key: 'home' },
                    { href: '/squadrons', key: 'squadrons' },
                    { href: '/leaderboard/players', key: 'leaderboards' },
                    { href: '/analytics', key: 'analytics' },
                    { href: '/timeline', key: 'timeline' },
                    { href: '/docs', key: 'docs' },
                ]; %>
                <% navLinks.forEach(link => { %>
                    <% if (typeof activePage !== 'undefined' && activePage === link.key) { %>
                        <a href="<%= link.href %>" class="text-accent transition-colors text-sm font-medium border-b-2 border-accent pb-1"><%= t('nav.' + link.key) %></a>
                    <% } else { %>
                        <a href="<%= link.href %>" class="text-muted hover:text-accent transition-colors text-sm font-medium"><%= t('nav.' + link.key) %></a>
                    <% } %>
                <% }); %>
                <a href="/premium" class="<%= typeof activePage !== 'undefined' && activePage === 'premium' ? 'nav-premium transition-colors text-sm font-medium border-b-2 border-[#ffd700] pb-1' : 'nav-premium transition-colors text-sm font-medium' %>"><%= t('nav.premium') %></a>
                <a href="/support" class="nav-rainbow transition-colors text-sm font-medium flex items-center">
                    <i class="fas fa-life-ring mr-1.5 text-xs"></i>
                    <%= t('nav.support') %>
                </a>
                <a href="https://ko-fi.com/notsotoothless" target="_blank" rel="noopener noreferrer" class="nav-donate transition-colors text-sm font-medium flex items-center">
                    <i class="fas fa-heart mr-1.5 text-xs"></i>
                    <%= t('nav.donate') %>
                </a>
            </div>
            <!-- Right: Language toggle + Discord -->
            <div class="hidden lg:flex items-center space-x-6 flex-shrink-0">
                <div class="relative" id="langDropdown">
                    <button onclick="document.getElementById('langDropdown').classList.toggle('open')" class="flex items-center gap-3 px-3 py-1.5 text-sm font-medium rounded-md border transition-colors" style="border-color: rgba(144,238,144,0.2); color: #90EE90;">
                        <span id="langCurrent"><%= lang === 'en' ? 'ENG' : lang === 'ru' ? 'РУС' : lang === 'fr' ? 'FRA' : lang === 'it' ? 'ITA' : lang === 'uk' ? 'УКР' : lang === 'de' ? 'DEU' : lang === 'es' ? 'ESP' : lang === 'pl' ? 'POL' : lang === 'cs' ? 'CES' : '简中' %></span>
                        <i class="fas fa-chevron-down text-[10px] opacity-60"></i>
                    </button>
                    <div class="absolute right-0 top-full mt-1 min-w-[170px] bg-[#2A2A2A] border border-white/10 rounded-lg shadow-xl overflow-hidden hidden-dropdown" style="z-index: 100;">
                        <button onclick="switchLanguage('en')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'en' ? 'text-[#90EE90]' : 'text-white/70' %>">ENG <span class="text-white/30 ml-1">English</span></button>
                        <button onclick="switchLanguage('ru')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'ru' ? 'text-[#90EE90]' : 'text-white/70' %>">РУС <span class="text-white/30 ml-1">Русский</span></button>
                        <button onclick="switchLanguage('fr')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'fr' ? 'text-[#90EE90]' : 'text-white/70' %>">FRA <span class="text-white/30 ml-1">Français</span></button>
                        <button onclick="switchLanguage('it')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'it' ? 'text-[#90EE90]' : 'text-white/70' %>">ITA <span class="text-white/30 ml-1">Italiano</span></button>
                        <button onclick="switchLanguage('uk')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'uk' ? 'text-[#90EE90]' : 'text-white/70' %>">УКР <span class="text-white/30 ml-1">Українська</span></button>
                        <button onclick="switchLanguage('de')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'de' ? 'text-[#90EE90]' : 'text-white/70' %>">DEU <span class="text-white/30 ml-1">Deutsch</span></button>
                        <button onclick="switchLanguage('es')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'es' ? 'text-[#90EE90]' : 'text-white/70' %>">ESP <span class="text-white/30 ml-1">Español</span></button>
                        <button onclick="switchLanguage('pl')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'pl' ? 'text-[#90EE90]' : 'text-white/70' %>">POL <span class="text-white/30 ml-1">Polski</span></button>
                        <button onclick="switchLanguage('cs')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'cs' ? 'text-[#90EE90]' : 'text-white/70' %>">CES <span class="text-white/30 ml-1">Čeština</span></button>
                        <button onclick="switchLanguage('zh-CN')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'zh-CN' ? 'text-[#90EE90]' : 'text-white/70' %>">简中 <span class="text-white/30 ml-1">简体中文</span></button>
                    </div>
                </div>
                <button class="btn-primary px-4 py-2 rounded-lg text-sm font-bold inline-flex items-center" id="inviteBtn">
                    <i class="fab fa-discord mr-2"></i><%= t('nav.addToDiscord') %>
                </button>
            </div>
            <button class="lg:hidden text-accent" id="mobileMenuBtn">
                <i class="fas fa-bars text-xl"></i>
            </button>
        </div>
    </div>
    <div class="hidden lg:hidden border-t border-white/5 bg-[#1E1E1E]/98" id="mobileMenu">
        <div class="px-6 py-4 space-y-2">
            <% navLinks.forEach(link => { %>
                <% if (typeof activePage !== 'undefined' && activePage === link.key) { %>
                    <a href="<%= link.href %>" class="block px-4 py-2 text-accent bg-white/5 rounded-md"><%= t('nav.' + link.key) %></a>
                <% } else { %>
                    <a href="<%= link.href %>" class="block px-4 py-2 text-muted hover:bg-white/5 rounded-md"><%= t('nav.' + link.key) %></a>
                <% } %>
            <% }); %>
            <a href="/premium" class="block px-4 py-2 nav-premium <%= typeof activePage !== 'undefined' && activePage === 'premium' ? 'bg-white/5' : 'hover:bg-white/5' %> rounded-md"><%= t('nav.premium') %></a>
            <a href="/support" class="block px-4 py-2 nav-rainbow hover:bg-white/5 rounded-md">
                <i class="fas fa-life-ring mr-2"></i><%= t('nav.support') %>
            </a>
            <a href="https://ko-fi.com/notsotoothless" target="_blank" rel="noopener noreferrer" class="block px-4 py-2 nav-donate hover:bg-white/5 rounded-md">
                <i class="fas fa-heart mr-2"></i><%= t('nav.donate') %>
            </a>
            <button class="block w-full px-4 py-2 btn-primary font-semibold rounded-md text-center" id="inviteBtnMobile">
                <i class="fab fa-discord mr-2"></i><%= t('nav.addToDiscord') %>
            </button>
            <div class="border border-white/10 rounded-md overflow-hidden">
                <button onclick="switchLanguage('en')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'en' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">ENG — English</button>
                <button onclick="switchLanguage('ru')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'ru' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">РУС — Русский</button>
                <button onclick="switchLanguage('fr')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'fr' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">FRA — Français</button>
                <button onclick="switchLanguage('it')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'it' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">ITA — Italiano</button>
                <button onclick="switchLanguage('uk')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'uk' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">УКР — Українська</button>
                <button onclick="switchLanguage('de')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'de' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">DEU — Deutsch</button>
                <button onclick="switchLanguage('es')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'es' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">ESP — Español</button>
                <button onclick="switchLanguage('pl')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'pl' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">POL — Polski</button>
                <button onclick="switchLanguage('cs')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'cs' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">CES — Čeština</button>
                <button onclick="switchLanguage('zh-CN')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'zh-CN' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">简中 — 简体中文</button>
            </div>
        </div>
    </div>
</nav>
<script>
(function(){
    var sw = document.getElementById('botSwitcher');
    if (!sw) return;
    document.addEventListener('click', function(e){
        if (sw.classList.contains('open') && !sw.contains(e.target)) {
            sw.classList.remove('open');
        }
    });
    document.addEventListener('keydown', function(e){
        if (e.key === 'Escape' && sw.classList.contains('open')) {
            sw.classList.remove('open');
        }
    });
})();
</script>
