<!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><%= typeof metaTitle !== 'undefined' ? metaTitle : botName %></title>
    <meta name="description" content="<%= typeof metaDescription !== 'undefined' ? metaDescription : `${botName} - The Best Squadron Battles Bot.` %>">
    <meta name="theme-color" content="<%= typeof metaThemeColor !== 'undefined' ? metaThemeColor : '#90EE90' %>">
    <meta property="og:type" content="website">
    <meta property="og:url" content="<%= typeof metaUrl !== 'undefined' ? metaUrl : 'https://sre.pawjob.us/' %>">
    <meta property="og:title" content="<%= typeof metaTitle !== 'undefined' ? metaTitle : botName %>">
    <meta property="og:description" content="<%= typeof metaDescription !== 'undefined' ? metaDescription : `${botName} - The Best Squadron Battles Bot.` %>">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="<%= typeof metaTitle !== 'undefined' ? metaTitle : botName %>">
    <meta name="twitter:description" content="<%= typeof metaDescription !== 'undefined' ? metaDescription : `${botName} - The Best Squadron Battles Bot.` %>">
    <link rel="icon" type="image/png" href="/images/transparent_toothlessssss.png">

    <!-- Preload Critical Resources -->
    <link rel="preload" href="/Fonts/symbols_skyquake.ttf" as="font" type="font/ttf" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <!-- Optimized Font Loading -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="/css/output.css">

    <!-- Defer non-critical CSS -->
    <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');
            font-display: swap;
        }

        /* Performance-optimized base styles */
        * {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
        }

        body {
            min-height: 100vh;
        }

        /* Remove individual section backgrounds - let body gradient show through */
        .hero-bg {
            background: transparent;
        }

        .hero-overlay {
            background: transparent;
        }

        /* Optimized gradient text */
        .gradient-text {
            background: linear-gradient(135deg, #F5F5DC 0%, #E8E8D0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Enhanced Card styles */
        .feature-card {
            background: linear-gradient(135deg, rgba(62, 78, 62, 0.2) 0%, rgba(44, 44, 44, 0.2) 100%);
            border: 1px solid rgba(245, 245, 220, 0.08);
            backdrop-filter: blur(12px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .card-hover:hover {
            transform: translateY(-3px);
            background: linear-gradient(135deg, rgba(62, 78, 62, 0.3) 0%, rgba(44, 44, 44, 0.3) 100%);
            border-color: rgba(144, 238, 144, 0.3);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
        }

        .card-hover:hover i {
            color: #F5F5DC;
            /* Icon turns cream on hover */
            transform: scale(1.1);
            transition: transform 0.3s ease;
        }

        /* Premium Button Glow */
        .btn-primary {
            background: linear-gradient(135deg, #F5F5DC 0%, #E8E8D0 100%);
            box-shadow: 0 4px 20px rgba(245, 245, 220, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4);
            color: #1E1E1E;
            font-weight: 700;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .btn-primary:hover {
            box-shadow: 0 8px 25px rgba(245, 245, 220, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
            transform: translateY(-2px);
        }

        .btn-primary:active {
            transform: translateY(0);
        }

        /* Search Input Polish */
        .search-input-glass {
            background: rgba(30, 30, 30, 0.6);
            border: 1px solid rgba(245, 245, 220, 0.1);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .search-input-glass:focus {
            background: rgba(40, 40, 40, 0.8);
            border-color: rgba(144, 238, 144, 0.4);
            box-shadow: 0 0 0 2px rgba(144, 238, 144, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        /* Trusted by animation - GPU accelerated */
        @keyframes scroll {
            0% {
                transform: translate3d(0, 0, 0);
            }

            100% {
                transform: translate3d(-50%, 0, 0);
            }
        }

        .animate-scroll {
            animation: scroll 60s linear infinite;
            will-change: transform;
        }

        .trusted-scroll {
            mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
            -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
        }

        /* Utility classes */
        .text-accent {
            color: #F5F5DC;
        }

        .text-muted {
            color: #90EE90;
        }

        /* Reduce animations on low-end devices */
        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* Unified Search Bar */
        .search-bar {
            background: rgba(28, 28, 28, 0.6);
            border: 1px solid rgba(144, 238, 144, 0.06);
            border-radius: 16px;
            backdrop-filter: blur(20px);
            transition: border-color 0.3s ease;
        }
        .search-bar:focus-within {
            border-color: rgba(144, 238, 144, 0.18);
        }
        .search-drop {
            position: absolute;
            left: -4px;
            right: -4px;
            top: calc(100% + 8px);
            border-radius: 12px;
            max-height: 260px;
            overflow-y: auto;
            z-index: 999;
            background: rgba(20, 20, 20, 0.98);
            border: 1px solid rgba(144, 238, 144, 0.1);
            backdrop-filter: blur(24px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
        }
        .search-drop::-webkit-scrollbar { width: 4px; }
        .search-drop::-webkit-scrollbar-thumb { background: rgba(144, 238, 144, 0.15); border-radius: 4px; }
        .search-hit {
            display: block;
            color: inherit;
            text-decoration: none;
            padding: 10px 16px;
            cursor: pointer;
            transition: background 0.15s;
            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        }
        .search-hit:last-child { border-bottom: none; }
        .search-hit:hover { background: rgba(144, 238, 144, 0.05); }
        .sq-active { color: #90EE90 !important; font-family: 'skyquakesymbols', 'Inter', sans-serif; }
        #squadronInput::placeholder, #playerInput::placeholder { color: rgba(255,255,255,0.35); }
        #squadronInput:focus, #playerInput:focus { outline: none; }
    </style>
</head>

<body class="text-white antialiased">
    <%- include('partials/nav', { activePage: 'home' }) %>

    <!-- Hero Section - Balanced Spacing -->
    <section class="hero-bg pt-32 pb-16 lg:pt-40 lg:pb-20 relative">
        <div class="hero-overlay absolute inset-0 pointer-events-none"></div>

        <div class="max-w-[1400px] mx-auto px-6 lg:px-8 relative z-10">
            <!-- Top Row: Title and CTA -->
            <div class="text-center">

                <!-- Heading -->
                <h1 class="text-3xl sm:text-4xl lg:text-5xl xl:text-6xl font-bold leading-[1.1] tracking-tight">
                    <span class="gradient-text"><%= t('home.squadronBattles') %></span><br>
                    <span class="text-muted"><%= t('home.madeSimple') %></span>
                </h1>

                <!-- CTA Buttons -->
                <div class="flex flex-col sm:flex-row items-center justify-center gap-4" style="margin-top: 3rem;">
                    <a href="#" class="btn-primary px-6 py-2.5 rounded-lg text-sm font-bold inline-flex items-center"
                        id="ctaInviteBtn">
                        <i class="fab fa-discord text-base mr-2"></i>
                        <%= t('home.addToDiscord') %>
                    </a>
                    <a href="/docs"
                        class="px-6 py-2.5 rounded-lg border text-accent font-semibold text-sm inline-flex items-center transition-colors hover:bg-white/5 bg-[rgba(168,230,207,0.06)] border-[rgba(168,230,207,0.2)]">
                        <i class="fas fa-book mr-2"></i>
                        <%= t('home.learnMore') %>
                    </a>
                </div>
            </div>

            <!-- Search Section -->
            <div class="max-w-[800px] mx-auto relative" style="margin-top: 5rem; margin-bottom: 4rem; z-index: 100;">
                <div class="search-bar flex p-3" id="searchBar">
                    <div class="flex-1 px-4 py-3 relative">
                        <div class="text-[10px] font-bold tracking-[0.2em] uppercase mb-2" style="color: rgba(144,238,144,0.35)"><%= t('home.searchBySquadron') %></div>
                        <div class="flex items-center">
                            <input type="text" id="squadronInput"
                                style="flex:1; background:transparent; border:none; outline:none; color:#fff; font-size:14px; font-weight:500; padding:0;"
                                placeholder="<%= t('home.typeSquadronName') %>" autocomplete="off">
                            <button id="squadronClear" class="hidden" style="background:none; border:none; color:rgba(255,255,255,0.2); cursor:pointer; font-size:11px; padding:4px 8px; transition:color 0.2s;">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <div id="squadronDropdown" class="search-drop hidden"></div>
                    </div>
                    <div class="self-stretch my-3" style="width: 1px; background: rgba(144,238,144,0.06)"></div>
                    <div class="flex-1 px-4 py-3 relative">
                        <div class="text-[10px] font-bold tracking-[0.2em] uppercase mb-2" style="color: rgba(144,238,144,0.35)"><%= t('home.orByPlayer') %></div>
                        <div class="flex items-center">
                            <input type="text" id="playerInput"
                                style="flex:1; background:transparent; border:none; outline:none; color:#fff; font-size:14px; font-weight:500; padding:0;"
                                placeholder="<%= t('home.typePlayerName') %>" autocomplete="off">
                        </div>
                        <div id="playerDropdown" class="search-drop hidden"></div>
                    </div>
                </div>
            </div>

            <!-- Feature Cards Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" style="gap: 1.5rem;">
                <!-- Feature Cards - Compact -->
                <a href="/games" class="feature-card card-hover rounded-lg p-4 block">
                    <div class="flex items-center gap-3">
                        <div
                            class="w-10 h-10 rounded-lg flex items-center justify-center bg-[rgba(168,230,207,0.1)] border border-[rgba(168,230,207,0.2)] flex-shrink-0">
                            <i class="fas fa-broadcast-tower text-accent"></i>
                        </div>
                        <div>
                            <h3 class="text-base font-semibold text-accent leading-tight"><%= t('home.liveFeed') %></h3>
                            <p class="text-xs text-muted leading-tight mt-0.5"><%= t('home.realTimeMatches') %></p>
                        </div>
                    </div>
                </a>

                <a href="/leaderboard/players" class="feature-card card-hover rounded-lg p-4 block">
                    <div class="flex items-center gap-3">
                        <div
                            class="w-10 h-10 rounded-lg flex items-center justify-center bg-[rgba(168,230,207,0.1)] border border-[rgba(168,230,207,0.2)] flex-shrink-0">
                            <i class="fas fa-trophy text-accent"></i>
                        </div>
                        <div>
                            <h3 class="text-base font-semibold text-accent leading-tight"><%= t('nav.leaderboards') %></h3>
                            <p class="text-xs text-muted leading-tight mt-0.5"><%= t('home.topPlayers') %></p>
                        </div>
                    </div>
                </a>

                <a href="/leaderboard/vehicles" class="feature-card card-hover rounded-lg p-4 block">
                    <div class="flex items-center gap-3">
                        <div
                            class="w-10 h-10 rounded-lg flex items-center justify-center bg-[rgba(168,230,207,0.1)] border border-[rgba(168,230,207,0.2)] flex-shrink-0">
                            <i class="fas fa-fighter-jet text-accent"></i>
                        </div>
                        <div>
                            <h3 class="text-base font-semibold text-accent leading-tight"><%= t('home.vehicleStatsCard') %></h3>
                            <p class="text-xs text-muted leading-tight mt-0.5"><%= t('home.performanceMetrics') %></p>
                        </div>
                    </div>
                </a>

                <a href="/analytics" class="feature-card card-hover rounded-lg p-4 block">
                    <div class="flex items-center gap-3">
                        <div
                            class="w-10 h-10 rounded-lg flex items-center justify-center bg-[rgba(168,230,207,0.1)] border border-[rgba(168,230,207,0.2)] flex-shrink-0">
                            <i class="fas fa-chart-bar text-accent"></i>
                        </div>
                        <div>
                            <h3 class="text-base font-semibold text-accent leading-tight"><%= t('home.analyticsCard') %></h3>
                            <p class="text-xs text-muted leading-tight mt-0.5"><%= t('home.globalStatistics') %></p>
                        </div>
                    </div>
                </a>

                <a href="/squadrons" class="feature-card card-hover rounded-lg p-4 block">
                    <div class="flex items-center gap-3">
                        <div
                            class="w-10 h-10 rounded-lg flex items-center justify-center bg-[rgba(168,230,207,0.1)] border border-[rgba(168,230,207,0.2)] flex-shrink-0">
                            <i class="fas fa-users text-accent"></i>
                        </div>
                        <div>
                            <h3 class="text-base font-semibold text-accent leading-tight"><%= t('home.squadronHubCard') %></h3>
                            <p class="text-xs text-muted leading-tight mt-0.5"><%= t('home.squadronStats') %></p>
                        </div>
                    </div>
                </a>

                <a href="/leaderboard/comparison" class="feature-card card-hover rounded-lg p-4 block">
                    <div class="flex items-center gap-3">
                        <div
                            class="w-10 h-10 rounded-lg flex items-center justify-center bg-[rgba(168,230,207,0.1)] border border-[rgba(168,230,207,0.2)] flex-shrink-0">
                            <i class="fas fa-balance-scale text-accent"></i>
                        </div>
                        <div>
                            <h3 class="text-base font-semibold text-accent leading-tight"><%= t('home.comparisonCard') %></h3>
                            <p class="text-xs text-muted leading-tight mt-0.5"><%= t('home.compareStats') %></p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </section>


    <!-- CTA Section -->
    <section class="py-16 lg:py-20 relative overflow-hidden">
        <div class="max-w-[1400px] mx-auto px-6 lg:px-8 relative z-10">
            <div class="text-center max-w-3xl mx-auto">
                <h2 class="text-3xl lg:text-4xl font-bold mb-4 text-accent" id="random-squadron-cta">Meow</h2>
                <p class="text-lg text-muted mb-8"><%= t('home.joinServers') %></p>
                <a href="#" class="btn-primary px-10 py-4 rounded-xl text-lg inline-flex items-center font-bold"
                    id="ctaInviteBtn2">
                    <i class="fab fa-discord text-2xl mr-3"></i>
                    <%= t('home.addToDiscord') %>
                </a>
            </div>
        </div>
    </section>

    <!-- Supporters -->
    <% if (typeof supporters !== 'undefined' && supporters.length > 0) { %>
    <section class="pb-40" style="background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 30%, rgba(0,0,0,0.45) 100%); padding-top: 102px;">
        <div class="max-w-[1400px] mx-auto px-6 lg:px-8">
            <p class="text-center text-sm uppercase tracking-widest text-muted opacity-70 mb-5"><%= t('home.supportedBy') %></p>
            <div class="flex flex-wrap justify-center gap-2">
                <% supporters.forEach(function(sq) { %>
                <a href="/squadrons/<%= encodeURIComponent(sq.short) %>"
                   class="px-3 py-1 rounded-full text-xs font-medium border border-[rgba(144,238,144,0.15)] text-muted hover:text-accent hover:border-[rgba(144,238,144,0.35)] transition-colors backdrop-blur-sm bg-[rgba(144,238,144,0.04)]">
                    <span class="opacity-70"><%= sq.short %></span> // <%= sq.long %>
                </a>
                <% }); %>
            </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>
        let playersData = [];
        let allSquadrons = [];
        let selectedSquadron = null;
        let selectedSquadronClanId = null;
        let selectedSquadronShort = null;
        let searchTimeout, squadronTimeout;
        let playersState = 'unloaded'; // unloaded → loading → ready | error
        let squadronsState = 'unloaded';

        const escapeHtml = (t) => { const d = document.createElement('div'); d.textContent = t; return d.innerHTML; };

        const loadSquadronData = async () => {
            squadronsState = 'loading';
            try {
                const response = await window.apiClient.getSquadronLeaderboard();
                allSquadrons = (response.squadrons || []).map(s => ({
                    name: s.long_name || s.tag_name || s.squadron_name,
                    tag_name: s.tag_name,
                    short_name: s.short_name || s.tag_name,
                    clan_id: s.clan_id,
                    player_count: s.player_count || 0
                }));
                squadronsState = 'ready';
            } catch (e) {
                console.error('Error loading squadron data:', e);
                squadronsState = 'error';
            }
        };

        const loadPlayerData = async () => {
            if (playersState === 'ready' || playersState === 'loading') return;
            playersState = 'loading';
            try {
                const response = await window.apiClient.getPlayerLeaderboard();
                playersData = (response.players || []).map(p => ({
                    ...p,
                    total_kills: p.total_kills || ((p.ground_kills || 0) + (p.air_kills || 0)),
                })).sort((a, b) => b.total_kills - a.total_kills);
                playersState = 'ready';
                if (!plDrop.classList.contains('hidden')) {
                    renderPlayers(plInput.value.trim().toLowerCase());
                }
            } catch (e) {
                console.error('Error loading player data:', e);
                playersState = 'error';
            }
        };

        const sqInput = document.getElementById('squadronInput');
        const plInput = document.getElementById('playerInput');
        const sqDrop = document.getElementById('squadronDropdown');
        const plDrop = document.getElementById('playerDropdown');
        const sqClear = document.getElementById('squadronClear');

        // --- Squadron search ---
        sqInput.addEventListener('input', () => {
            clearTimeout(squadronTimeout);
            if (selectedSquadron) {
                selectedSquadron = null;
                selectedSquadronClanId = null;
                selectedSquadronShort = null;
                sqInput.classList.remove('sq-active');
                sqClear.classList.add('hidden');
                plInput.placeholder = __t('home.typePlayerName');
            }
            const val = sqInput.value.trim().toLowerCase();
            if (val.length < 1) { sqDrop.classList.add('hidden'); return; }

            if (squadronsState !== 'ready') {
                sqDrop.innerHTML = '<div class="p-3 text-center text-xs" style="color:rgba(144,238,144,0.25)">' + __t('common.loading') + '</div>';
                sqDrop.classList.remove('hidden');
                return;
            }

            squadronTimeout = setTimeout(() => {
                const hits = allSquadrons.filter(s => {
                    const names = [s.name, s.tag_name, s.short_name].filter(Boolean).map(n => n.toLowerCase());
                    return names.some(n => n.includes(val));
                }).slice(0, 12);
                if (!hits.length) {
                    sqDrop.innerHTML = '<div class="p-3 text-center text-xs" style="color:rgba(144,238,144,0.25)">' + __t('home.noSquadronsFound') + '</div>';
                } else {
                    sqDrop.innerHTML = hits.map(s =>
                        `<div class="search-hit" data-name="${escapeHtml(s.tag_name || s.name)}" data-short="${escapeHtml(s.short_name)}" data-clanid="${s.clan_id != null ? s.clan_id : ''}">
                            <span class="font-['skyquakesymbols'] text-sm" style="color:#A8E6CF">${escapeHtml(s.name)}</span>
                            <span class="text-[11px] ml-2" style="color:rgba(144,238,144,0.25)">${s.player_count} ${__t('common.playersCount')}</span>
                        </div>`
                    ).join('');
                    sqDrop.querySelectorAll('.search-hit').forEach(el =>
                        el.addEventListener('click', () => pickSquadron(el.dataset.name, el.dataset.short, el.dataset.clanid))
                    );
                }
                sqDrop.classList.remove('hidden');
            }, 100);
        });

        sqInput.addEventListener('keydown', (e) => {
            if (e.key === 'Tab') {
                const val = sqInput.value.trim().toLowerCase();
                if (!selectedSquadron && val.length >= 1) {
                    const hits = allSquadrons.filter(s => {
                        const names = [s.name, s.tag_name, s.short_name].filter(Boolean).map(n => n.toLowerCase());
                        return names.some(n => n.includes(val));
                    });
                    if (hits.length >= 1) {
                        e.preventDefault();
                        pickSquadron(hits[0].tag_name || hits[0].name, hits[0].short_name, hits[0].clan_id);
                    }
                }
            }
            if (e.key === 'Enter') {
                e.preventDefault();
                if (selectedSquadronClanId != null) {
                    window.location.href = '/squadrons/' + selectedSquadronClanId;
                } else if (selectedSquadronShort) {
                    window.location.href = '/squadrons/' + encodeURIComponent(selectedSquadronShort);
                } else {
                    const val = sqInput.value.trim().toLowerCase();
                    const match = allSquadrons.find(s => {
                        const names = [s.name, s.tag_name, s.short_name].filter(Boolean).map(n => n.toLowerCase());
                        return names.some(n => n === val);
                    });
                    if (match) {
                        const path = match.clan_id != null ? String(match.clan_id) : encodeURIComponent(match.short_name || match.name);
                        window.location.href = '/squadrons/' + path;
                    }
                }
            }
            if (e.key === 'Escape') { sqDrop.classList.add('hidden'); sqInput.blur(); }
        });

        function pickSquadron(tagName, shortName, clanId) {
            selectedSquadron = tagName;
            selectedSquadronClanId = clanId != null && clanId !== '' ? Number(clanId) : null;
            selectedSquadronShort = shortName || tagName;
            sqInput.value = tagName;
            sqInput.classList.add('sq-active');
            sqClear.classList.remove('hidden');
            sqDrop.classList.add('hidden');
            plInput.placeholder = __t('home.searchPlayersIn') + ' ' + (tagName || '') + '...';
            plInput.focus();
        }

        sqClear.addEventListener('click', () => {
            selectedSquadron = null;
            selectedSquadronClanId = null;
            selectedSquadronShort = null;
            sqInput.value = '';
            sqInput.classList.remove('sq-active');
            sqClear.classList.add('hidden');
            plInput.placeholder = __t('home.typePlayerName');
            plDrop.classList.add('hidden');
            sqInput.focus();
        });

        // --- Player search ---
        function renderPlayers(val) {
            if (playersState === 'loading') {
                plDrop.innerHTML = '<div class="p-3 text-center text-xs" style="color:rgba(144,238,144,0.25)"><i class="fas fa-spinner fa-spin mr-1"></i>' + __t('common.loading') + '</div>';
                plDrop.classList.remove('hidden');
                return;
            }
            if (playersState === 'error') {
                plDrop.innerHTML = '<div class="p-3 text-center text-xs" style="color:rgba(255,80,80,0.5)">Failed to load. <button onclick="playersState=\'unloaded\';loadPlayerData()" style="text-decoration:underline;background:none;border:none;color:rgba(144,238,144,0.5);cursor:pointer">' + __t('common.retry') + '</button></div>';
                plDrop.classList.remove('hidden');
                return;
            }

            let src = playersData;
            if (selectedSquadronClanId != null) {
                src = src.filter(p => p.squadron_clan_id === selectedSquadronClanId);
            } else if (selectedSquadron) {
                src = src.filter(p => (p.squadron_name || '').toLowerCase() === selectedSquadron.toLowerCase());
            }

            const hits = val.length >= 2
                ? src.filter(p => p.nick.toLowerCase().includes(val))
                : (selectedSquadron ? src : []);
            const results = hits.slice(0, 20);

            if (!results.length && (val.length >= 2 || selectedSquadron)) {
                plDrop.innerHTML = '<div class="p-3 text-center text-xs" style="color:rgba(144,238,144,0.25)">' + __t('home.noPlayersFound') + '</div>';
            } else if (!results.length) {
                plDrop.classList.add('hidden'); return;
            } else {
                plDrop.innerHTML = results.map(p => {
                    const tag = (!selectedSquadron && p.squadron_name)
                        ? `<span class="font-['skyquakesymbols'] text-[11px] mr-1.5" style="color:rgba(144,238,144,0.25)">${escapeHtml(p.squadron_name)}</span>` : '';
                    return `<a href="/players/${p.uid}" class="search-hit">${tag}<span class="text-sm font-medium" style="color:#A8E6CF">${escapeHtml(p.nick)}</span></a>`;
                }).join('');
            }
            plDrop.classList.remove('hidden');
        }

        plInput.addEventListener('input', () => {
            clearTimeout(searchTimeout);
            const val = plInput.value.trim().toLowerCase();
            if (val.length < 2 && !selectedSquadron) { plDrop.classList.add('hidden'); return; }
            if (playersState !== 'ready') {
                loadPlayerData();
                renderPlayers(val);
                return;
            }
            searchTimeout = setTimeout(() => renderPlayers(val), 100);
        });

        plInput.addEventListener('focus', () => {
            if (playersState !== 'ready') {
                loadPlayerData();
            }
            if (selectedSquadron && plInput.value.trim() === '') {
                if (playersState === 'ready') {
                    renderPlayers('');
                } else {
                    renderPlayers('');
                }
            }
        });

        plInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' && selectedSquadron && plInput.value.trim() === '') {
                e.preventDefault();
                if (selectedSquadronClanId != null) {
                    window.location.href = '/squadrons/' + selectedSquadronClanId;
                } else {
                    window.location.href = '/squadrons/' + encodeURIComponent(selectedSquadronShort);
                }
            }
            if (e.key === 'Escape') { plDrop.classList.add('hidden'); plInput.blur(); }
        });

        // Close dropdowns on outside click
        document.addEventListener('click', (e) => {
            if (!e.target.closest('#searchBar')) { sqDrop.classList.add('hidden'); plDrop.classList.add('hidden'); }
        });

        // --- Mobile menu ---
        document.getElementById('mobileMenuBtn').addEventListener('click', () => {
            document.getElementById('mobileMenu').classList.toggle('hidden');
        });

        // --- Random CTA ---
        const ctaPhrases = [__t('home.ctaElev8'), __t('home.ctaReign'), __t('home.ctaMeow'), __t('home.ctaPurr'), __t('home.ctaRawr')];
        function setRandomCTA() {
            const el = document.getElementById('random-squadron-cta');
            if (el) el.textContent = ctaPhrases[Math.floor(Math.random() * ctaPhrases.length)];
        }

        // --- Subtitle cycling ---
        const subtitles = [__t('index.subtitle1'), __t('index.subtitle2'), __t('index.subtitle3'), __t('index.subtitle4')];
        let subIdx = 0;
        const cycleSubtitle = () => {
            const el = document.getElementById('cycling-subtitle');
            if (el) { el.style.opacity = '0.5'; setTimeout(() => { subIdx = (subIdx + 1) % subtitles.length; el.textContent = subtitles[subIdx]; el.style.opacity = '1'; }, 300); }
        };

        // --- Init ---
        document.addEventListener('DOMContentLoaded', () => {
            setRandomCTA();
            loadSquadronData();
            // Preload player data in background so it's ready when user searches
            setTimeout(loadPlayerData, 500);
            setTimeout(() => setInterval(cycleSubtitle, 4000), 3000);
        });
    </script>
</body>

</html>
