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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;700;800;900&display=swap" rel="stylesheet">

@section Styles {
    <link rel="stylesheet" href="/Millions/css/rule.css" />
}

<div class="millions-rule-page">
    <!-- Header -->
    <div class="header">
        <a href="javascript:history.back()" class="back-btn">
            <i class="fa-solid fa-arrow-left"></i>
        </a>
        <div class="header-title">@Lang.millions_rule_title</div>
    </div>

    <!-- Main Content Card -->
    <div class="content-card custom-scrollbar">
        <div class="content-inner">
            <!-- Banner -->
            <div class="banner">
                <div class="banner-content">
                    <span class="banner-text">@Lang.millions_mega_millions</span>
                    <div class="banner-ball">
                        <img src="/Millions/img/ball_88.png" alt="88">
                        <i class="fa-solid fa-crown crown"></i>
                    </div>
                </div>
            </div>

            <!-- Draw Schedule -->
            <div class="rule-section">
                <div class="section-header">
                    <span class="section-emoji">📅</span>
                    <div class="section-title">@Lang.millions_draw_schedule</div>
                </div>
                <ul class="rule-list">
                    <li class="rule-item">@Lang.millions_draw_frequency</li>
                    <li class="rule-item">@Lang.millions_draw_time</li>
                    <li class="rule-item">@Lang.millions_ticket_closing_time</li>
                </ul>
            </div>

            <!-- How to play -->
            <div class="rule-section">
                <div class="section-header">
                    <span class="section-emoji">▶️</span>
                    <div class="section-title">@Lang.millions_how_to_play</div>
                </div>
                <ul class="rule-list">
                    <li class="rule-item">@Lang.millions_ticket_includes_6</li>
                    <li class="rule-item rule-subitem">@Lang.millions_select_5_main</li>
                    <li class="rule-item rule-subitem">@Lang.millions_select_1_mega</li>
                    <li class="rule-item">@Lang.millions_ticket_price</li>
                    <li class="rule-item">@Lang.millions_payment_via</li>
                </ul>
            </div>

            <!-- Game rules -->
            <div class="rule-section">
                <div class="section-header">
                    <span class="section-emoji">🔨</span>
                    <div class="section-title">@Lang.millions_game_rules_title</div>
                </div>
                <ul class="rule-list">
                    <li class="rule-item">@Lang.millions_results_based_on</li>
                    <li class="rule-item">@Lang.millions_one_highest_prize</li>
                    <li class="rule-item">@Lang.millions_winnings_calculated</li>
                </ul>
            </div>

            <!-- Prize Structure -->
            <div class="rule-section">
                <div class="section-header">
                    <span class="section-emoji">🔔</span>
                    <div class="section-title">@Lang.millions_prize_structure</div>
                </div>
                
                <div class="prize-header-labels">
                    <div class="prize-label">@Lang.millions_match_result_header</div>
                    <div class="prize-label">@Lang.millions_prize_htg_header</div>
                </div>

                <div class="prize-rows">
                    <div class="prize-row">
                        <div class="match-col">@Lang.millions_match_5_plus_mega</div>
                        <div class="prize-col jackpot">@Lang.millions_jackpot_label</div>
                    </div>
                    <div class="prize-row">
                        <div class="match-col">@Lang.millions_match_5_numbers</div>
                        <div class="prize-col">400</div>
                    </div>
                    <div class="prize-row">
                        <div class="match-col">@Lang.millions_match_4_plus_mega</div>
                        <div class="prize-col">4.000</div>
                    </div>
                    <div class="prize-row">
                        <div class="match-col">@Lang.millions_match_4_numbers</div>
                        <div class="prize-col">2.000</div>
                    </div>
                    <div class="prize-row">
                        <div class="match-col">@Lang.millions_match_3_plus_mega</div>
                        <div class="prize-col">800</div>
                    </div>
                    <div class="prize-row">
                        <div class="match-col">@Lang.millions_match_3_numbers</div>
                        <div class="prize-col">40</div>
                    </div>
                    <div class="prize-row">
                        <div class="match-col">@Lang.millions_match_2_plus_mega</div>
                        <div class="prize-col">40</div>
                    </div>
                    <div class="prize-row">
                        <div class="match-col">@Lang.millions_match_1_plus_mega</div>
                        <div class="prize-col">30</div>
                    </div>
                    <div class="prize-row">
                        <div class="match-col">@Lang.millions_match_mega_only</div>
                        <div class="prize-col">10</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

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