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

<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="/Millions/css/faq.css">

<div class="millions-faq-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.faq</div>
    </div>

    <!-- Main Content Card -->
    <div class="content-card custom-scrollbar">
        <!-- Banner Graphic directly integrated with Grey background -->
        <div class="w-full relative flex justify-center mt-3 mb-1">
             <img src="/Millions/img/faq_banner_full.png" alt="FAQ Graphic" class="w-full max-h-48 object-contain z-10 px-4 pointer-events-none">
        </div>

        <!-- Messages / FAQ Chat Style List -->
        <div class="flex-1 w-full px-5 pt-8 pb-20 space-y-5" id="faq-list">
            
            <!-- Standard Row Bot Bubble (Question) -->
            <div class="flex justify-start">
                 <div class="rounded-xl rounded-tl-sm px-5 py-3 shadow-sm w-[90%] bg-[#0062FF] text-white">
                    <span class="text-sm font-bold leading-snug block">@Lang.faq_millions_q1</span>
                 </div>
            </div>

            <!-- Standard Row User Bubble (Answer) -->
            <div class="flex justify-end mt-2">
                 <div class="rounded-xl rounded-tr-sm px-5 py-4 shadow-md w-[90%] bg-white text-[#212121] border border-gray-100">
                    <span class="text-[13px] font-medium leading-relaxed block">@Lang.faq_millions_a1</span>
                 </div>
            </div>

            <!-- Standard Row Bot Bubble (Question) -->
            <div class="flex justify-start mt-8">
                 <div class="rounded-xl rounded-tl-sm px-5 py-3 shadow-sm w-[90%] bg-[#0062FF] text-white">
                    <span class="text-sm font-bold leading-snug block">@Lang.faq_millions_q2</span>
                 </div>
            </div>

            <!-- Standard Row User Bubble (Answer Long Text) -->
            <div class="flex justify-end mt-2">
                 <div class="rounded-xl rounded-tr-sm px-5 py-4 shadow-md w-[90%] bg-white text-[#212121] border border-gray-100">
                    <span class="text-[13px] font-medium leading-relaxed block mb-3">@Lang.faq_millions_a2</span>
                    <span class="text-sm font-bold text-[#0062FF] block mb-1">@Lang.faq_millions_q3</span>
                 </div>
            </div>

            <!-- Q4:-->
            <div class="flex justify-start pt-4">
                 <div class="rounded-xl rounded-tl-sm px-5 py-3 shadow-sm w-[90%] bg-[#0062FF] text-white">
                     <span class="text-sm font-bold leading-snug block">@Lang.faq_millions_q4</span>
                 </div>
            </div>
            <div class="flex justify-end mt-2">
                 <div class="rounded-xl rounded-tr-sm px-5 py-4 shadow-md w-[90%] bg-white text-[#212121] border border-gray-100">
                     <span class="text-[13px] font-medium leading-relaxed block">@Html.Raw(Lang.faq_millions_a4)</span>
                 </div>
            </div>

            <!-- Q5:-->
            <div class="flex justify-start pt-4">
                <div class="rounded-xl rounded-tl-sm px-5 py-3 shadow-sm w-[90%] bg-[#0062FF] text-white">
                    <span class="text-sm font-bold leading-snug block">@Lang.faq_millions_q5</span>
                </div>
            </div>
            <div class="flex justify-end mt-2">
                <div class="rounded-xl rounded-tr-sm px-5 py-4 shadow-md w-[90%] bg-white text-[#212121] border border-gray-100">
                    <span class="text-[13px] font-medium leading-relaxed block">@Html.Raw(Lang.faq_millions_a5)</span>
                </div>
            </div>

                        <!-- Q6:-->
            <div class="flex justify-start pt-4">
                 <div class="rounded-xl rounded-tl-sm px-5 py-3 shadow-sm w-[90%] bg-[#0062FF] text-white">
                     <span class="text-sm font-bold leading-snug block">@Lang.faq_millions_q6</span>
                 </div>
            </div>
            <div class="flex justify-end mt-2">
                 <div class="rounded-xl rounded-tr-sm px-5 py-4 shadow-md w-[90%] bg-white text-[#212121] border border-gray-100">
                     <span class="text-[13px] font-medium leading-relaxed block">@Html.Raw(Lang.faq_millions_a6)</span>
                 </div>
            </div>


            <!-- Q7:-->
            <div class="flex justify-start pt-4">
                <div class="rounded-xl rounded-tl-sm px-5 py-3 shadow-sm w-[90%] bg-[#0062FF] text-white">
                    <span class="text-sm font-bold leading-snug block">@Lang.faq_millions_q7</span>
                </div>
            </div>
            <div class="flex justify-end mt-2">
                <div class="rounded-xl rounded-tr-sm px-5 py-4 shadow-md w-[90%] bg-white text-[#212121] border border-gray-100">
                    <span class="text-[13px] font-medium leading-relaxed block">@Html.Raw(Lang.faq_millions_a7)</span>
                </div>
            </div>

            <!-- Entries for other games removed as per request -->

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