@{
    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="main-container animate__animated animate__fadeIn bg-[#F5F5F5] min-h-screen relative flex flex-col pb-24 shadow-xl overflow-x-hidden">

    <!-- Header Block (Red) - Fixed -->
    <div class="fixed top-0 left-0 md:left-1/2 md:-translate-x-1/2 w-full md:max-w-[430px] bg-[#0062FF] h-[52px] flex items-center justify-between px-4 z-[100] shadow-sm">
        <!-- 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 cursor-pointer">
            <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="text-white text-[24px] font-bold tracking-wide drop-shadow-sm">@Lang.faq</span>
        </div>
    </div>

    <!-- Header Spacer (~52px) -->
    <div class="h-[52px]"></div>



    <!-- 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_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_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_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_a2</span>
                 <span class="text-sm font-bold text-[#0062FF] block mb-1">@Lang.faq_q3</span>
                 <span class="text-[13px] font-medium leading-relaxed block">@Lang.faq_a3</span>
             </div>
        </div>

        <!-- Q4: BASIC PICK 10 Prizes -->
        <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>

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

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