@extends('layouts.app', ['title' => 'প্রোফাইল'])

@section('content')
<div class="space-y-3.5 w-full -mx-1 sm:mx-0 text-white font-siliguri">

    <!-- Top Header (fragment_profile.xml) -->
    <div class="bg-[#1A1A2E] rounded-3xl p-5 shadow-xl border border-indigo-950/60 flex flex-col items-center text-center">
        <h2 class="text-lg font-black text-white mb-3">প্রোফাইল</h2>
        
        <!-- Avatar Circle (72dp x 72dp in #00f5a0) -->
        <div class="w-18 h-18 rounded-full bg-[#00F5A0] text-black font-black text-3xl flex items-center justify-center shadow-lg border-2 border-white/20 font-outfit">
            G
        </div>

        <div class="flex items-center gap-1.5 mt-3">
            <h3 class="text-lg font-black text-white">Guest</h3>
            <span class="text-sm cursor-pointer hover:scale-110 transition">✏️</span>
        </div>

        <span class="mt-2 bg-[#2D2D5A] text-[#00F5A0] text-xs font-bold px-4 py-1.5 rounded-full font-siliguri">
            গেস্ট মোড
        </span>

        <!-- ✨ অগ্রগতি সেভ করতে অ্যাকাউন্ট তৈরি করুন -->
        <div class="w-full mt-3.5 bg-[#2D2D5A] rounded-xl p-3 flex items-center justify-between text-left cursor-pointer hover:brightness-110 transition">
            <span class="text-xs text-[#00F5A0] font-bold">✨ অগ্রগতি সেভ করতে অ্যাকাউন্ট তৈরি করুন</span>
            <span class="text-sm text-[#00F5A0] font-black">→</span>
        </div>
    </div>

    <!-- 👑 Premium Upgrade Banner (fragment_profile.xml card_premium_banner) -->
    <div class="bg-[#F59E0B] rounded-2xl p-4 shadow-lg flex items-center justify-between gap-3 text-white cursor-pointer hover:brightness-105 transition">
        <span class="text-3xl">👑</span>
        <div class="flex-1 min-w-0">
            <h4 class="font-black text-sm text-white">Premium আপগ্রেড</h4>
            <p class="text-[11px] text-[#FFFBEB] mt-0.5 leading-snug">সব প্রিমিয়াম ফিচার আনলক করুন এবং বিজ্ঞাপনমুক্ত শিখুন</p>
        </div>
        <span class="text-2xl font-black">›</span>
    </div>

    <!-- 2x2 Stat Cards (fragment_profile.xml #1e1e3a) -->
    <div class="grid grid-cols-2 gap-3">
        <!-- 1. Day Streak -->
        <div class="bg-[#1E1E3A] rounded-2xl p-4 text-center shadow-md flex flex-col items-center justify-center border border-indigo-900/40">
            <span class="text-3xl">🔥</span>
            <span class="text-2xl font-black text-[#00F5A0] font-outfit mt-1 leading-tight">১</span>
            <span class="text-xs text-[#888888] mt-0.5">দিন স্ট্রিক</span>
        </div>

        <!-- 2. Total XP -->
        <div class="bg-[#1E1E3A] rounded-2xl p-4 text-center shadow-md flex flex-col items-center justify-center border border-indigo-900/40">
            <span class="text-3xl">⭐</span>
            <span class="text-2xl font-black text-[#FFD93D] font-outfit mt-1 leading-tight">০</span>
            <span class="text-xs text-[#888888] mt-0.5">মোট XP</span>
        </div>

        <!-- 3. Lessons -->
        <div class="bg-[#1E1E3A] rounded-2xl p-4 text-center shadow-md flex flex-col items-center justify-center border border-indigo-900/40">
            <span class="text-3xl">📚</span>
            <span class="text-2xl font-black text-[#7B61FF] font-outfit mt-1 leading-tight">০</span>
            <span class="text-xs text-[#888888] mt-0.5">লেসন</span>
        </div>

        <!-- 4. Learned Words -->
        <div class="bg-[#1E1E3A] rounded-2xl p-4 text-center shadow-md flex flex-col items-center justify-center border border-indigo-900/40">
            <span class="text-3xl">📖</span>
            <span class="text-2xl font-black text-[#FF6B35] font-outfit mt-1 leading-tight">০</span>
            <span class="text-xs text-[#888888] mt-0.5">শেখা শব্দ</span>
        </div>
    </div>

    <!-- Current Level Card with 3D Badge (fragment_profile.xml) -->
    <div class="bg-[#1E1E3A] rounded-2xl p-4 shadow-md border border-indigo-900/40">
        <div class="flex items-center gap-3">
            <img src="{{ asset('assets/images/level_badge_01.png') }}" alt="Level Badge" class="w-13 h-13 object-contain">
            <div class="flex-1 min-w-0">
                <span class="text-sm font-bold text-white block">বর্তমান লেভেল</span>
                <span class="text-xs text-[#00F5A0] font-outfit font-bold">Level 1</span>
            </div>
            <span class="text-base font-black text-[#FF6B35] font-outfit">A0</span>
        </div>

        <!-- Progress Bar -->
        <div class="w-full bg-slate-800 rounded-full h-2.5 mt-3 overflow-hidden">
            <div class="bg-[#FF6B35] h-full rounded-full" style="width: 36%"></div>
        </div>
        <span class="text-[11px] text-[#888888] mt-1.5 block">পরবর্তী লেভেলে পৌঁছাতে আর ৬৪ XP প্রয়োজন</span>
    </div>

    <!-- Daily Goal Card (fragment_profile.xml) -->
    <div class="bg-[#1E1E3A] rounded-2xl p-4 shadow-md border border-indigo-900/40">
        <div class="flex items-center justify-between">
            <span class="text-sm font-bold text-white">দৈনিক লক্ষ্য</span>
            <span class="text-xs font-bold text-[#00F5A0] font-outfit">০ / ২০</span>
        </div>
        <div class="w-full bg-slate-800 rounded-full h-2.5 mt-2.5 overflow-hidden">
            <div class="bg-[#00F5A0] h-full rounded-full" style="width: 15%"></div>
        </div>
        <span class="text-[10px] text-[#666666] mt-1.5 block">ট্যাপ করে লক্ষ্য বদলান</span>
    </div>

    <!-- 3 Action Cards (❤️ প্রিয় শব্দ, 🔄 রিভিউ, 🏆 অর্জন) -->
    <div class="grid grid-cols-3 gap-2.5">
        <div class="bg-[#1E1E3A] rounded-2xl p-3 text-center border border-indigo-900/40 shadow-sm cursor-pointer hover:bg-indigo-950/60 transition">
            <span class="text-2xl">❤️</span>
            <span class="text-xs font-bold text-white mt-1 block">প্রিয় শব্দ</span>
            <span class="text-[10px] text-[#FF6B6B] font-outfit">১২টি</span>
        </div>
        <div class="bg-[#1E1E3A] rounded-2xl p-3 text-center border border-indigo-900/40 shadow-sm cursor-pointer hover:bg-indigo-950/60 transition">
            <span class="text-2xl">🔄</span>
            <span class="text-xs font-bold text-white mt-1 block">রিভিউ</span>
            <span class="text-[10px] text-[#FFD93D] font-outfit">৮টি বাকী</span>
        </div>
        <div class="bg-[#1E1E3A] rounded-2xl p-3 text-center border border-indigo-900/40 shadow-sm cursor-pointer hover:bg-indigo-950/60 transition">
            <span class="text-2xl">🏆</span>
            <span class="text-xs font-bold text-white mt-1 block">অর্জন</span>
            <span class="text-[10px] text-[#00F5A0] font-outfit">৩ / ৪০</span>
        </div>
    </div>

    <!-- 📊 ড্যাশবোর্ড Section (fragment_profile.xml) -->
    <div class="pt-2">
        <h3 class="text-base font-bold text-white mb-2.5 flex items-center gap-1.5">
            📊 ড্যাশবোর্ড
        </h3>

        <!-- My Progress Card -->
        <div class="bg-[#1E1E3A] rounded-2xl p-4 mb-3 border border-indigo-900/40 flex items-center justify-between gap-3 cursor-pointer hover:bg-indigo-950/60 transition">
            <span class="text-2xl">📊</span>
            <div class="flex-1 min-w-0">
                <h4 class="text-sm font-bold text-white">আমার অগ্রগতি</h4>
                <p class="text-[11px] text-[#888888] mt-0.5">শব্দ, বাক্য ও কুইজ সম্পন্নতার সার্কুলার মিটার ও বিশ্লেষণ</p>
            </div>
            <span class="text-lg text-[#888888]">→</span>
        </div>

        <div class="grid grid-cols-2 gap-3 mb-3">
            <div class="bg-[#1E1E3A] rounded-2xl p-4 text-center border border-indigo-900/40 cursor-pointer hover:bg-indigo-950/60 transition">
                <span class="text-2xl">📅</span>
                <span class="text-xs font-bold text-white mt-1.5 block">অধ্যয়ন ক্যালেন্ডার</span>
            </div>
            <div class="bg-[#1E1E3A] rounded-2xl p-4 text-center border border-indigo-900/40 cursor-pointer hover:bg-indigo-950/60 transition">
                <span class="text-2xl">🏆</span>
                <span class="text-xs font-bold text-white mt-1.5 block">লিডারবোর্ড</span>
            </div>
        </div>

        <div class="grid grid-cols-2 gap-3 mb-3">
            <div class="bg-[#1E1E3A] rounded-2xl p-4 text-center border border-indigo-900/40 cursor-pointer hover:bg-indigo-950/60 transition">
                <span class="text-2xl">🗺️</span>
                <span class="text-xs font-bold text-white mt-1.5 block">লেভেল রোডম্যাপ</span>
            </div>
            <div class="bg-[#1E1E3A] rounded-2xl p-4 text-center border border-indigo-900/40 cursor-pointer hover:bg-indigo-950/60 transition">
                <span class="text-2xl">🏅</span>
                <span class="text-xs font-bold text-white mt-1.5 block">অর্জন</span>
            </div>
        </div>
    </div>

    <!-- ⚙️ সেটিংস Section (fragment_profile.xml) -->
    <div class="pt-1">
        <div class="bg-[#1E1E3A] rounded-2xl p-4 mb-3 border border-indigo-900/40 flex items-center justify-between gap-3">
            <span class="text-sm font-bold text-white">⚙️ সেটিংস</span>
            <span class="text-lg text-[#888888]">→</span>
        </div>

        <div class="grid grid-cols-3 gap-2 mb-3">
            <div class="bg-[#1E1E3A] rounded-2xl p-3 text-center border border-indigo-900/40">
                <span class="text-xl">🔔</span>
                <span class="text-[11px] font-bold text-white mt-1 block">রিমাইন্ডার</span>
            </div>
            <div class="bg-[#1E1E3A] rounded-2xl p-3 text-center border border-indigo-900/40">
                <span class="text-xl">🔊</span>
                <span class="text-[11px] font-bold text-white mt-1 block">অডিও</span>
            </div>
            <div class="bg-[#1E1E3A] rounded-2xl p-3 text-center border border-indigo-900/40">
                <span class="text-xl">🔤</span>
                <span class="text-[11px] font-bold text-white mt-1 block">ফন্ট</span>
            </div>
        </div>

        <!-- Share Buttons Row -->
        <div class="grid grid-cols-3 gap-2">
            <button class="bg-[#1E1E3A] text-[#CCCCCC] text-xs font-bold py-3 rounded-xl border border-indigo-900/40">
                শেয়ার
            </button>
            <button class="bg-[#1E1E3A] text-[#CCCCCC] text-xs font-bold py-3 rounded-xl border border-indigo-900/40">
                ⭐ রেট দিন
            </button>
            <button class="bg-[#1E1E3A] text-[#CCCCCC] text-xs font-bold py-3 rounded-xl border border-indigo-900/40">
                ✉️ মতামত
            </button>
        </div>
    </div>

</div>
@endsection