<footer class="py-6 border-t border-[rgba(144,238,144,0.08)]">
    <div class="max-w-[1400px] mx-auto px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-4 mb-4">
            <!-- Brand -->
            <div class="lg:col-span-1">
                <div class="flex items-center space-x-2.5">
                    <img src="/images/toothless_server.gif" alt="<%= botName %>" class="h-6 w-auto" width="24" height="24">
                    <span class="text-sm font-semibold text-accent"><%= botName %></span>
                </div>
            </div>

            <!-- Product Links - Two Columns -->
            <div>
                <h4 class="font-semibold mb-1.5 text-accent text-xs uppercase tracking-wide opacity-70"><%= t('footer.services') %></h4>
                <div class="grid grid-cols-2 gap-x-4 gap-y-1">
                    <a href="/games" class="text-muted hover:text-accent transition-colors text-[11px]"><%= t('footer.matchFeed') %></a>
                    <a href="/leaderboard/players" class="text-muted hover:text-accent transition-colors text-[11px]"><%= t('nav.leaderboards') %></a>
                    <a href="/leaderboard/vehicles" class="text-muted hover:text-accent transition-colors text-[11px]"><%= t('footer.vehicleStats') %></a>
                    <a href="/analytics" class="text-muted hover:text-accent transition-colors text-[11px]"><%= t('footer.analytics') %></a>
                    <a href="/squadrons" class="text-muted hover:text-accent transition-colors text-[11px]"><%= t('footer.squadronHub') %></a>
                    <a href="/leaderboard/comparison" class="text-muted hover:text-accent transition-colors text-[11px]"><%= t('footer.comparison') %></a>
                </div>
            </div>

            <div>
                <h4 class="font-semibold mb-1.5 text-accent text-xs uppercase tracking-wide opacity-70"><%= t('footer.resources') %></h4>
                <ul class="space-y-1">
                    <li><a href="/docs" class="text-muted hover:text-accent transition-colors text-[11px]"><%= t('footer.documentation') %></a></li>
                    <li><a href="/support" class="text-muted hover:text-accent transition-colors text-[11px]"><%= t('nav.support') %></a></li>
                    <li><a href="#" class="text-muted hover:text-accent transition-colors text-[11px]" id="footerInviteBtn"><%= t('footer.inviteBot') %></a></li>
                </ul>
            </div>

            <div>
                <h4 class="font-semibold mb-1.5 text-accent text-xs uppercase tracking-wide opacity-70"><%= t('footer.legal') %></h4>
                <ul class="space-y-1">
                    <li><a href="/terms" class="text-muted hover:text-accent transition-colors text-[11px]"><%= t('footer.termsOfService') %></a></li>
                    <li><a href="/terms" class="text-muted hover:text-accent transition-colors text-[11px]"><%= t('footer.privacyPolicy') %></a></li>
                </ul>
            </div>
        </div>

        <div class="pt-3 text-center text-[10px] border-t border-[rgba(144,238,144,0.08)] text-muted opacity-60">
            <p><%= t('footer.meowing') %> | <%= t('footer.websiteBy') %> <a href="https://clippi.dev/" target="_blank" rel="noopener noreferrer" class="text-accent hover:underline">@clippi.dev</a> <%= t('footer.andToothless') %></p>
        </div>
    </div>
</footer>
