@model LotteryWebApp.Models.HomeIndex_ViewModel
@{
    ViewData["Title"] = "Millions - How to play";
    ViewData["ActiveTab"] = "More";
    Layout = "~/Areas/Millions/Views/Shared/_Layout.cshtml";
}
@using LotteryWebApp.Languages;

<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/Millions/css/site.css" />

<!-- Add custom font Bricolage Grotesque to match Figma styling -->
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/Millions/css/howtoplay.css" />

<div class="main-container animate__animated animate__fadeIn min-h-screen relative flex flex-col pb-24 font-bricolage overflow-x-hidden" style="background-color: #EAEAEA !important;">
    
    <!-- Header (Red Background) -->
    <div class="w-full bg-[#0062FF] h-[52px] flex items-center justify-between px-4 sticky top-0 z-50">
        <!-- Back Button -->
        <button onclick="window.history.back()" class="w-10 h-10 flex items-center justify-center -ml-2 rounded-full active:bg-white/20 transition-colors z-10 text-white">
            <i class="fa-solid fa-arrow-left text-[20px]"></i>
        </button>
        <!-- Title -->
        <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
            <span class="font-bold text-[24px] text-white tracking-wide drop-shadow-sm">@Lang.how_to_play</span>
        </div>
    </div>

    <!-- Content / Cards -->
    <div class="w-full flex flex-col px-5 py-4 gap-6">

        <!-- Card 1: Basic Pick 10 -->
        <div class="w-full flex flex-col gap-1.5 cursor-pointer hover:opacity-95 transition-opacity" onclick="window.location.href='/Millions/Home/GameHome'">
            <h2 class="text-[13px] font-bold text-[#534A4A] tracking-normal px-1">@Lang.how_to_play_pick10</h2>
            <div class="w-full h-[90px] rounded-[16px] relative overflow-hidden card-red border border-white/20 shadow-[0_4px_10px_rgba(238,0,51,0.25)]">
                <!-- Background Glow -->
                <div class="absolute -left-6 -top-6 w-20 h-20 bg-white/20 rounded-full blur-2xl"></div>
                <div class="absolute -bottom-10 -right-10 w-24 h-24 bg-black/20 rounded-full blur-2xl"></div>
                
                <div class="w-full h-full flex items-center justify-between pl-3 pr-2 relative z-10">
                    <!-- Left: Basic Pick 10 Logo -->
                    <div class="flex flex-col items-center justify-center pt-2">
                        <span class="text-[14px] font-black italic text-white drop-shadow-md leading-[1.1] text-center" style="font-family: 'Montserrat', sans-serif;">Basic<br>Pick</span>
                        <img src="/Millions/img/ball_10.png" class="w-7 h-7 object-contain drop-shadow-md -mt-2 -mr-8 border-2 border-[#E11D48] rounded-full bg-[#E11D48]">
                    </div>

                    <!-- Center: Numbers -->
                    <div class="flex flex-col items-center mt-0.5 ml-4">
                        <span class="text-[10px] font-[800] text-white tracking-widest drop-shadow">@Lang.jackpot_prize</span>
                        <div class="flex items-start gap-1 mt-0.5">
                            <span class="text-[28px] font-[900] text-white leading-none tracking-tight drop-shadow-md">100.000</span>
                            <span class="text-[7px] font-[800] text-white bg-transparent border border-white/60 rounded px-[2px] mt-1 shadow-sm leading-tight">HTG</span>
                        </div>
                        <div class="text-[9px] text-white/90 mt-0.5">@Lang.next_round <span class="font-[900] text-white ml-0.5 drop-shadow">05:00</span></div>
                    </div>

                    <!-- Right: Graphic & Button -->
                    <div class="flex flex-col items-end justify-between h-full py-2 w-[70px]">
                        <img src="/Millions/img/play_chest.png" class="h-[46px] w-[56px] object-contain drop-shadow-lg scale-125 origin-top-right mr-1 mt-1">
                        <div class="w-full yellow-button text-center rounded-[8px] py-[3px] text-[10px] font-[900] px-2 z-20 active:scale-95 transition-transform mt-auto">@Lang.play</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Card 2: Millionair -->
        <div class="w-full flex flex-col gap-1.5 cursor-pointer hover:opacity-95 transition-opacity" onclick="window.location.href='/Millions/Home/GameHome'">
            <h2 class="text-[13px] font-bold text-[#534A4A] tracking-normal px-1">@Lang.how_to_play_millionair</h2>
            <div class="w-full h-[90px] rounded-[16px] relative overflow-hidden card-blue border border-white/20 shadow-[0_4px_10px_rgba(26,146,244,0.25)]">
                <!-- Background Glow -->
                <div class="absolute -left-6 -top-6 w-20 h-20 bg-white/20 rounded-full blur-2xl"></div>
                <div class="absolute -bottom-10 -right-10 w-24 h-24 bg-black/20 rounded-full blur-2xl"></div>
                
                <div class="w-full h-full flex items-center justify-between pl-1 pr-2 relative z-10">
                    <!-- Left: Millionair Graphic -->
                    <div class="flex flex-col items-center justify-end relative w-[80px] h-full z-10">
                        <img src="/Millions/img/ball_86.png" class="absolute left-[-12px] top-[12px] w-[38px] h-[38px] object-contain drop-shadow-md z-0 transform -rotate-[15deg]">
                        <img src="/Millions/img/ball_88.png" class="absolute left-[52px] top-[26px] w-[32px] h-[32px] object-contain drop-shadow-md z-0 transform rotate-[15deg]">
                        <img src="/Millions/img/m1.png" class="absolute left-[10px] bottom-[-5px] h-[95px] w-auto object-contain drop-shadow-md z-10">
                        <span class="text-[12px] font-black italic text-white drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)] absolute bottom-[8px] left-[12px] tracking-wide z-20" style="font-family: 'Montserrat', sans-serif;">Millionair</span>
                    </div>

                    <!-- Center: Numbers -->
                    <div class="flex flex-col items-center mt-0.5 -ml-1">
                        <span class="text-[10px] font-[800] text-white tracking-widest drop-shadow">@Lang.jackpot_prize</span>
                        <div class="flex items-start gap-1 mt-0.5">
                            <span class="text-[28px] font-[900] text-[#FFDE59] leading-none tracking-tight drop-shadow-md">500.000</span>
                            <span class="text-[7px] font-[800] text-white bg-transparent border border-white/60 rounded px-[2px] mt-1 shadow-sm leading-tight">HTG</span>
                        </div>
                        <div class="text-[9px] text-white/90 mt-0.5">@Lang.next_round <span class="font-[900] text-white ml-0.5 drop-shadow">05:00</span></div>
                    </div>

                    <!-- Right: Graphic & Button -->
                    <div class="flex flex-col items-end justify-between h-full py-2 w-[70px]">
                        <img src="/Millions/img/play_millionair.png" class="h-[43px] w-[58px] object-contain drop-shadow-[0_5px_8px_rgba(0,0,0,0.3)] scale-110 origin-right mr-1 mt-2">
                        <div class="w-full yellow-button text-center rounded-[8px] py-[3px] text-[10px] font-[900] px-2 z-20 active:scale-95 transition-transform mt-auto">@Lang.play</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Card 3: Mega Bet -->
        <div class="w-full flex flex-col gap-1.5 cursor-pointer hover:opacity-95 transition-opacity" onclick="window.location.href='/Millions/Home/GameHome'">
            <h2 class="text-[13px] font-bold text-[#534A4A] tracking-normal px-1">@Lang.how_to_play_megabet</h2>
            <div class="w-full h-[90px] rounded-[16px] relative overflow-hidden card-orange border border-white/20 shadow-[0_4px_10px_rgba(248,110,34,0.25)]">
                <!-- Background Glow -->
                <div class="absolute -left-6 -top-6 w-20 h-20 bg-white/20 rounded-full blur-2xl"></div>
                <div class="absolute -bottom-10 -right-10 w-24 h-24 bg-black/20 rounded-full blur-2xl"></div>
                
                <div class="w-full h-full flex items-center justify-between pl-3 pr-2 relative z-10">
                    <!-- Left: Mega Bet Graphic -->
                    <div class="flex items-center relative w-[80px] h-full">
                        <div class="flex flex-col text-white drop-shadow-md text-left z-20" style="font-family: 'Montserrat', sans-serif;">
                            <span class="text-[10px] font-[900] italic leading-[0.9]">@Lang.MEGA</span>
                            <span class="text-[15px] font-[900] italic text-[#FFDE59] leading-[0.9]">@Lang.Bet</span>
                        </div>
                        <img src="/Millions/img/ball_88.png" class="w-[22px] h-[22px] object-contain drop-shadow-md absolute left-[38px] top-[24px] z-10">
                        <img src="/Millions/img/ball_99.png" class="w-[28px] h-[28px] object-contain drop-shadow-lg absolute left-[52px] top-[30px] z-30">
                    </div>

                    <!-- Center: Numbers -->
                    <div class="flex flex-col items-center mt-0.5 ml-2">
                        <span class="text-[10px] font-[800] text-white tracking-widest drop-shadow">@Lang.jackpot_prize</span>
                        <div class="flex items-start gap-1 mt-0.5">
                            <span class="text-[28px] font-[900] text-white leading-none tracking-tight drop-shadow-md">800.000</span>
                            <span class="text-[7px] font-[800] text-white bg-transparent border border-white/60 rounded px-[2px] mt-1 shadow-sm leading-tight">HTG</span>
                        </div>
                        <div class="text-[9px] text-white/90 mt-0.5">@Lang.next_round <span class="font-[900] text-white ml-0.5 drop-shadow">05:00</span></div>
                    </div>

                    <!-- Right: Graphic & Button -->
                    <div class="flex flex-col items-end justify-between h-full py-2 w-[70px]">
                        <img src="/Millions/img/play_megabet.png" class="h-[43px] w-[65px] object-contain drop-shadow-[0_8px_10px_rgba(0,0,0,0.5)] scale-110 origin-right mr-1 mt-2">
                        <div class="w-full yellow-button text-center rounded-[8px] py-[3px] text-[10px] font-[900] px-2 z-20 active:scale-95 transition-transform mt-auto">@Lang.play</div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

<!-- Bottom Navbar shared component -->
<partial name="_BottomNavbar" />