@using LotteryWebAppNatcash.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-0 z-[120] px-3 py-2 rounded-2xl w-[calc(100%-1.5rem)] max-w-[430px] bg-white/95 backdrop-blur-md shadow-lg border border-white/60"
     style="position:fixed; left:50%; transform:translateX(-50%); bottom:0; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); width:calc(100% - 1.5rem); max-width:430px; z-index:120; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); box-shadow: 0 10px 26px rgba(0,0,0,0.12);">
    <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")">@Lang.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")">@Lang.rules</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")">@Lang.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")">@Lang.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")">@Lang.more</span>
            @if(activePage == "More") {
                <span class="w-5 h-1 bg-[#0062ff] rounded-full mt-1"></span>
            }
        </a>
    </div>
</nav>