@using LotteryWebApp.Languages
@{
    var activePage = ViewData["ActiveTab"] as string ?? "Home";
}
<!-- Bottom Navbar pinned statically white background row -->
<div class="fixed bottom-0 left-1/2 -translate-x-1/2 w-full min-[600px]:max-w-[414px] bg-white border-t border-gray-100 p-3 flex justify-around items-center z-50 shadow-[0_-2px_10px_rgba(0,0,0,0.05)] h-[82px]">
    <a href="/Millions/Home/GameHome" class="flex flex-col items-center @(activePage == "Home" ? "text-[var(--primary)]" : "text-gray-400 hover:text-[var(--primary)]") cursor-pointer relative transition-colors no-underline">
        @if(activePage == "Home") {
            <div class="absolute -top-[14px] left-1/2 -translate-x-1/2 w-10 h-[2.5px] bg-[#0062FF] rounded-sm"></div>
        }
        <img src="/Millions/img/icon_home.svg" alt="Home" class="w-8 h-8">
        <span class="text-[12px] mt-1 @(activePage == "Home" ? "font-extrabold" : "font-bold")" style="@(activePage == "Home" ? "color: #0062FF;" : "")">@Lang.home</span>
    </a>
    
    <a href="/Millions/Home/Rule" class="flex flex-col items-center @(activePage == "Rule" ? "text-[var(--primary)]" : "text-gray-400 hover:text-[var(--primary)]") cursor-pointer relative transition-colors no-underline">
        @if(activePage == "Rule") {
            <div class="absolute -top-[14px] left-1/2 -translate-x-1/2 w-10 h-[2.5px] bg-[#0062FF] rounded-sm"></div>
        }
        <img src="/Millions/img/icon_rule.svg" alt="Rule" class="w-8 h-8">
        <span class="text-[12px] mt-1 @(activePage == "Rule" ? "font-extrabold" : "font-bold")" style="@(activePage == "Rule" ? "color: #0062FF;" : "")">@Lang.rules</span>
    </a>

    <a href="/Millions/Home/History" class="flex flex-col items-center @(activePage == "History" ? "text-[var(--primary)]" : "text-gray-400 hover:text-[var(--primary)]") cursor-pointer relative transition-colors no-underline">
        @if(activePage == "History") {
            <div class="absolute -top-[14px] left-1/2 -translate-x-1/2 w-10 h-[2.5px] bg-[#0062FF] rounded-sm"></div>
        }
        <img src="/Millions/img/icon_history.svg" alt="History" class="w-8 h-8">
        <span class="text-[12px] mt-1 @(activePage == "History" ? "font-extrabold" : "font-bold")" style="@(activePage == "History" ? "color: #0062FF;" : "")">@Lang.history</span>
    </a>

    <a href="/Millions/Home/FAQ" class="flex flex-col items-center @(activePage == "FAQ" ? "text-[var(--primary)]" : "text-gray-400 hover:text-[var(--primary)]") cursor-pointer relative transition-colors no-underline group">
        @if(activePage == "FAQ") {
            <div class="absolute -top-[14px] left-1/2 -translate-x-1/2 w-10 h-[2.5px] bg-[#0062FF] rounded-sm"></div>
        }
        <img src="/Millions/img/icon_faq.svg" alt="FAQ" class="w-8 h-8">
        <span class="text-[12px] mt-1 @(activePage == "FAQ" ? "font-extrabold drop-shadow-sm" : "font-bold")" style="@(activePage == "FAQ" ? "color: #0062FF;" : "")">@Lang.faq</span>
    </a>

    <a href="/Millions/Home/More" class="flex flex-col items-center @(activePage == "More" ? "text-[var(--primary)]" : "text-gray-400 hover:text-[var(--primary)]") cursor-pointer relative transition-colors no-underline group">
        @if(activePage == "More") {
            <div class="absolute -top-[14px] left-1/2 -translate-x-1/2 w-10 h-[2.5px] bg-[#0062FF] rounded-sm"></div>
        }
        <img src="/Millions/img/icon_more.svg" alt="More" class="w-8 h-8">
        <span class="text-[12px] mt-1 @(activePage == "More" ? "font-extrabold drop-shadow-sm" : "font-bold")" style="@(activePage == "More" ? "color: #0062FF;" : "")">@Lang.more</span>
    </a>
</div>