@using LotteryWebApp.Languages
@{
    var activePage = ViewData["ActiveTab"] as string ?? "Home";
}

<!-- Bottom navigation (fixed at bottom) -->
<nav class="navigation fixed left-1/2 -translate-x-1/2 bottom-3 z-[120] px-3 py-2 rounded-2xl w-[calc(100%-1.5rem)] max-w-[430px]"
     style="position:fixed; left:50%; transform:translateX(-50%); bottom:12px; width:calc(100% - 1.5rem); max-width:430px; z-index:120;">
    <div class="flex items-center justify-between">
        <a href="/Millions/Home/GameHome" class="nav-item @(activePage == "Home" ? "active" : "") flex flex-col items-center flex-1 no-underline">
            <img src="/Millions/assets/icons/nav-home.png" alt="" class="w-7 h-7"/>
            <span class="text-xs mt-1 @(activePage == "Home" ? "text-[#0062ff] font-semibold" : "text-gray-700")">Home</span>
            @if(activePage == "Home") {
                <span class="w-5 h-1 bg-[#0062ff] rounded-full mt-1"></span>
            }
        </a>
        <a href="/Millions/Home/Rule" class="nav-item @(activePage == "Rule" ? "active" : "") flex flex-col items-center flex-1 no-underline">
            <img src="/Millions/assets/icons/nav-rule.png" alt="" class="w-7 h-7"/>
            <span class="text-xs mt-1 @(activePage == "Rule" ? "text-[#0062ff] font-semibold" : "text-gray-700")">Rule</span>
            @if(activePage == "Rule") {
                <span class="w-5 h-1 bg-[#0062ff] rounded-full mt-1"></span>
            }
        </a>
        <a href="/Millions/Home/History" class="nav-item @(activePage == "History" ? "active" : "") flex flex-col items-center flex-1 no-underline">
            <img src="/Millions/assets/icons/nav-history.png" alt="" class="w-7 h-7"/>
            <span class="text-xs mt-1 @(activePage == "History" ? "text-[#0062ff] font-semibold" : "text-gray-700")">History</span>
            @if(activePage == "History") {
                <span class="w-5 h-1 bg-[#0062ff] rounded-full mt-1"></span>
            }
        </a>
        <a href="/Millions/Home/FAQ" class="nav-item @(activePage == "FAQ" ? "active" : "") flex flex-col items-center flex-1 no-underline">
            <img src="/Millions/assets/icons/nav-faq.png" alt="" class="w-7 h-7"/>
            <span class="text-xs mt-1 @(activePage == "FAQ" ? "text-[#0062ff] font-semibold" : "text-gray-700")">FAQ</span>
            @if(activePage == "FAQ") {
                <span class="w-5 h-1 bg-[#0062ff] rounded-full mt-1"></span>
            }
        </a>
        <a href="/Millions/Home/More" class="nav-item @(activePage == "More" ? "active" : "") flex flex-col items-center flex-1 no-underline">
            <img src="/Millions/assets/icons/nav-more.png" alt="" class="w-7 h-7"/>
            <span class="text-xs mt-1 @(activePage == "More" ? "text-[#0062ff] font-semibold" : "text-gray-700")">More</span>
            @if(activePage == "More") {
                <span class="w-5 h-1 bg-[#0062ff] rounded-full mt-1"></span>
            }
        </a>
    </div>
</nav>