@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">
                <style>
                    .millions-rule-page .prize-table {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        gap: 12px;
                    }
                    .millions-rule-page .prize-header-labels {
                        display: flex;
                        justify-content: space-between;
                        background-color: var(--primary-blue);
                        color: white;
                        padding: 12px 14px;
                        border-radius: 8px;
                        margin-bottom: 6px;
                        box-shadow: 0 4px 8px rgba(0, 98, 255, 0.2);
                    }
                    .millions-rule-page .prize-label {
                        font-weight: 800;
                        font-size: 13px;
                        text-transform: uppercase;
                    }
                    .millions-rule-page .prize-row {
                        display: flex;
                        justify-content: space-between;
                        padding: 8px 14px;
                        background-color: #fcfcfc;
                        border-radius: 8px;
                        border: 1px solid #f0f0f0;
                        align-items: center;
                    }
                    .millions-rule-page .prize-row:nth-child(even) {
                        background-color: #f7f9ff;
                    }
                    .millions-rule-page .match-header,
                    .millions-rule-page .match-col {
                        width: 64%;
                        text-align: left;
                    }
                    .millions-rule-page .prize-header,
                    .millions-rule-page .prize-col {
                        width: 36%;
                        text-align: right;
                    }
                    .millions-rule-page .match-col {
                        font-size: 12.5px;
                        color: #333;
                        font-weight: 600;
                        line-height: 1.3;
                    }
                    .millions-rule-page .prize-col {
                        font-size: 13.5px;
                        color: #000;
                        font-weight: 800;
                    }
                    .millions-rule-page .prize-col.jackpot {
                        color: #0062FF;
                        text-transform: uppercase;
                        font-weight: 900;
                    }
                </style>
                <div class="section-header">
                    <span class="section-emoji">🔔</span>
                    <div class="section-title">@Lang.millions_prize_structure</div>
                </div>
                
                <div class="prize-table">
                    <div class="prize-header-labels">
                        <div class="prize-label match-header">@Lang.millions_match_result_header</div>
                        <div class="prize-label prize-header">@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,000</div>
                        </div>
                        <div class="prize-row">
                            <div class="match-col">@Lang.millions_match_4_plus_mega</div>
                            <div class="prize-col">40,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>

            <!-- Mega Jackpot Rules -->
            <div class="rule-section jackpot-rules-section" style="margin-top: 32px; border-top: 1.5px dashed #eee; padding-top: 20px;">
                <style>
                    .jackpot-rules-section .rule-subsection-title {
                        font-weight: 800;
                        color: #1A1A1A;
                        margin-top: 16px;
                        font-size: 14px;
                    }
                    .jackpot-rules-section .rule-list {
                        margin-top: 6px;
                    }
                    .jackpot-rules-section .rule-item-dash {
                        padding-left: 15px !important;
                    }
                    .jackpot-rules-section .rule-item-dash::before {
                        content: '–' !important;
                        left: 0;
                        color: #333333;
                        font-weight: bold;
                    }
                </style>
                <div class="section-header" style="margin-bottom: 8px;">
                    <span class="section-emoji">🎰</span>
                    <div class="section-title">@Lang.millions_jackpot_rules_title</div>
                </div>
                
                <div class="rule-subsection-title">@Lang.millions_jackpot_rule1_title</div>
                <ul class="rule-list">
                    <li class="rule-item rule-item-dash">@Lang.millions_jackpot_rule1_desc1</li>
                    <li class="rule-item rule-item-dash">@Lang.millions_jackpot_rule1_desc2</li>
                </ul>

                <div class="rule-subsection-title">@Lang.millions_jackpot_rule2_title</div>
                <ul class="rule-list">
                    <li class="rule-item rule-item-dash">@Lang.millions_jackpot_rule2_desc1</li>
                    <li class="rule-item rule-item-dash">@Lang.millions_jackpot_rule2_desc2</li>
                </ul>

                <div class="rule-subsection-title">@Lang.millions_jackpot_rule3_title</div>
                <ul class="rule-list">
                    <li class="rule-item rule-item-dash">@Lang.millions_jackpot_rule3_desc1</li>
                    <li class="rule-item rule-item-dash">@Lang.millions_jackpot_rule3_desc2</li>
                </ul>

                <div class="rule-subsection-title">@Lang.millions_jackpot_rule4_title</div>
                <ul class="rule-list">
                    <li class="rule-item rule-item-dash">@Lang.millions_jackpot_rule4_desc1</li>
                    <li class="rule-item rule-item-dash">@Lang.millions_jackpot_rule4_desc2</li>
                </ul>

                <div class="rule-subsection-title">@Lang.millions_jackpot_rule5_title</div>
                <ul class="rule-list">
                    <li class="rule-item rule-item-dash">@Lang.millions_jackpot_rule5_desc1</li>
                    <li class="rule-item rule-subitem rule-item-dash" style="color: #555; font-size: 13px;">@Lang.millions_jackpot_rule5_item1</li>
                    <li class="rule-item rule-subitem rule-item-dash" style="color: #555; font-size: 13px;">@Lang.millions_jackpot_rule5_item2</li>
                    <li class="rule-item rule-subitem rule-item-dash" style="color: #555; font-size: 13px;">@Lang.millions_jackpot_rule5_item3</li>
                    <li class="rule-item rule-item-dash">@Lang.millions_jackpot_rule5_desc2</li>
                </ul>

                <div class="rule-subsection-title">@Lang.millions_jackpot_rule6_title</div>
                <ul class="rule-list">
                    <li class="rule-item rule-item-dash">@Lang.millions_jackpot_rule6_desc1</li>
                    <li class="rule-item rule-item-dash">@Lang.millions_jackpot_rule6_desc2</li>
                </ul>

                <div class="rule-subsection-title">@Lang.millions_jackpot_rule7_title</div>
                <ul class="rule-list">
                    <li class="rule-item rule-item-dash">@Lang.millions_jackpot_rule7_desc1</li>
                    <li class="rule-item rule-item-dash">@Lang.millions_jackpot_rule7_desc2</li>
                    <li class="rule-item rule-item-dash">@Lang.millions_jackpot_rule7_desc3</li>
                </ul>
            </div>
            
            <!-- Note Section -->
            <div class="rule-section note-section" style="margin-top: 32px; border-top: 1.5px dashed #eee; padding-top: 20px;">
                <style>
                    .note-section .rule-list {
                        margin-top: 8px;
                    }
                    .note-section .rule-item-no-bullet::before {
                        content: none !important;
                    }
                    .note-section .rule-item-no-bullet {
                        padding-left: 0 !important;
                        font-weight: 700;
                        color: #1A1A1A;
                    }
                </style>
                <div class="section-header" style="margin-bottom: 8px;">
                    <span class="section-emoji">📌</span>
                    <div class="section-title">@Lang.millions_note_title</div>
                </div>
                <ul class="rule-list">
                    <li class="rule-item rule-item-no-bullet">@Lang.millions_note_coin_rate</li>
                    <li class="rule-item" style="margin-top: 10px;">@Lang.millions_note_rewards_credit</li>
                    <li class="rule-item rule-subitem" style="color: #555; font-size: 13px;">@Lang.millions_note_conversion_main</li>
                    <li class="rule-item rule-subitem" style="color: #555; font-size: 13px;">@Lang.millions_note_conversion_natcash</li>
                </ul>
            </div>
        </div>
    </div>

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