@extends('layouts.app')

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

    <!-- 1. TOP BAR: SEARCH & WALLET -->
    <div class="flex items-center gap-2">
        <a href="{{ route('words.index') }}" class="flex-1 bg-[#002D22]/90 hover:bg-[#00382B] border border-[#00F5A0]/40 rounded-full py-2.5 px-4 flex items-center gap-2 text-white/90 text-xs sm:text-sm font-bold shadow-lg transition">
            <span class="text-sm">⌕</span>
            <span class="text-emerald-200/80">শব্দ খুঁজুন</span>
        </a>

        <div class="bg-[#002D22]/95 border border-[#00F5A0]/50 rounded-full px-3 py-2 flex items-center gap-2 text-xs font-black font-outfit shadow-lg text-white">
            <span class="flex items-center gap-1"><span class="text-cyan-400">💎</span> <span id="homeGems">0</span></span>
            <span class="text-emerald-700">|</span>
            <span class="flex items-center gap-1"><span class="text-amber-400">🪙</span> <span id="homeCoins">0</span></span>
        </div>
    </div>

    <!-- 2. TOP HERO ROW: PROFILE + STREAK + DAILY GOAL (Live Screenshot Exact) -->
    <div class="grid grid-cols-12 gap-2">
        
        <!-- Profile Card (Left 6 cols) -->
        <div onclick="openProfileModal()" class="col-span-12 sm:col-span-6 bg-[#EDF7F2] rounded-3xl p-3 flex items-center gap-3 border border-emerald-200/80 shadow-md cursor-pointer hover:brightness-95 transition">
            <div class="relative flex-shrink-0">
                <img src="{{ asset('assets/images/home_profile_boy_v2.webp') }}" alt="Profile" 
                     class="w-16 h-16 rounded-full object-cover border-2 border-emerald-400 shadow-md">
            </div>
            <div class="min-w-0">
                <span class="text-[11px] text-[#24332D] font-bold block">শুভ বিকাল,</span>
                <h3 class="text-base font-black text-[#0A1712] truncate">Guest!</h3>
                <div class="flex items-center gap-1.5 mt-0.5">
                    <span class="bg-white text-[#20342C] border border-slate-200 text-[9px] px-2 py-0.5 rounded-full font-extrabold shadow-2xs">
                        🇮🇹  ইতালি প্রেমী
                    </span>
                    <span class="text-[9px] text-[#F3C94B] font-black">
                        🏅 ব্রোঞ্জ
                    </span>
                </div>
            </div>
        </div>

        <!-- 1 Day Streak (3 cols) -->
        <div onclick="openStreakModal()" class="col-span-6 sm:col-span-3 bg-[#FDFBF7] rounded-3xl p-2.5 flex flex-col items-center justify-center text-center border border-amber-200/80 shadow-md cursor-pointer hover:scale-[1.02] transition">
            <span class="text-2xl">🔥</span>
            <span class="text-base font-black text-[#101D18] font-siliguri leading-tight mt-0.5">১ দিন</span>
            <span class="text-[8.5px] text-[#49665D] font-bold">সর্বোচ্চ: ১ দিন</span>
        </div>

        <!-- Daily Goal (3 cols) -->
        <a href="{{ route('courses.index') }}" class="col-span-6 sm:col-span-3 bg-[#F4FAF7] rounded-3xl p-2.5 flex flex-col items-center justify-center text-center border border-emerald-200/80 shadow-md hover:scale-[1.02] transition">
            <span class="text-[9px] font-bold text-[#123B2D] flex items-center gap-0.5">🎯 আজকের লক্ষ্য</span>
            <span class="text-base font-black text-[#071B14] font-outfit leading-tight mt-0.5">0/10</span>
            <span class="text-[8px] text-[#49665D] font-medium">চলুন আজ শিখি!</span>
        </a>

    </div>

    <!-- 3. TODAY'S LESSON HERO BANNER (3D Colosseum Girl Artwork from Screenshot) -->
    <div class="relative rounded-3xl overflow-hidden shadow-2xl border border-emerald-400/50 text-white min-h-[145px] flex items-center">
        <img src="{{ asset('assets/images/home_lesson_hero_v2.webp') }}" alt="Lesson Hero" class="absolute inset-0 w-full h-full object-cover">
        <div class="absolute inset-0 bg-gradient-to-r from-[#002D22]/95 via-[#002D22]/80 to-transparent"></div>

        <div class="relative z-10 p-4 max-w-xs">
            <span class="inline-block bg-[#00F5A0]/20 border border-[#00F5A0]/40 text-[#00F5A0] text-[9.5px] font-black px-2.5 py-0.5 rounded-full mb-1">
                আজকের পাঠ
            </span>
            <h3 class="text-base sm:text-lg font-black leading-tight text-white">
                দৈনন্দিন কাজের শব্দ
            </h3>
            <p class="text-[10px] text-emerald-100/90 mt-0.5 line-clamp-1 font-medium">
                দৈনন্দিন জীবনের দরকারি শব্দ ও সঠিক উচ্চারণ
            </p>
            <a href="{{ route('words.index') }}" class="inline-flex items-center gap-1 mt-2.5 bg-gradient-to-r from-[#00F5A0] to-teal-400 text-[#002B20] font-black text-[11px] px-3.5 py-1.5 rounded-xl shadow-lg hover:brightness-105 transition">
                <span>▶ পাঠ শুরু করুন ›</span>
            </a>
        </div>

        <span class="absolute bottom-3 right-3 bg-black/50 backdrop-blur-md text-white text-[9.5px] font-bold px-2.5 py-1 rounded-xl border border-white/20">
            ৫ মিনিটের পাঠ
        </span>
    </div>

    <!-- 4. LEVEL PROGRESS & 4 ROUND STAT TILES (Live Screenshot Exact) -->
    <div class="bg-white/95 rounded-3xl p-3.5 shadow-xl border border-white/60">
        <div class="flex items-center gap-3">
            
            <!-- Left: 3D #1 Badge -->
            <div class="w-18 h-18 flex-shrink-0 flex items-center justify-center">
                <img src="{{ asset('assets/images/level_badge_01.png') }}" alt="Level 1" class="w-18 h-18 object-contain drop-shadow-md">
            </div>

            <!-- Middle: XP Bar -->
            <div class="flex-1 min-w-0 pr-1">
                <h4 class="text-xs sm:text-sm font-black text-[#0F766E] leading-tight">
                    আপনার অগ্রগতি 36%
                </h4>
                <div class="w-full bg-slate-200 rounded-full h-2 mt-1.5 overflow-hidden">
                    <div class="bg-gradient-to-r from-emerald-500 to-teal-400 h-full rounded-full" style="width: 36%"></div>
                </div>
            </div>

            <!-- Right: 2x2 Round Stat Chips (Mint, Blue, Purple, Gold) -->
            <div class="grid grid-cols-2 gap-1.5 flex-shrink-0">
                <a href="{{ route('courses.index') }}" class="w-11 h-11 rounded-2xl bg-teal-50 border border-teal-200 flex flex-col items-center justify-center text-center shadow-2xs hover:scale-105 transition">
                    <span class="text-[9px] font-bold text-[#0F766E] leading-none">📚 0</span>
                    <span class="text-[7.5px] text-[#0F766E] font-bold leading-none mt-0.5">পাঠ</span>
                </a>
                <a href="{{ route('words.index') }}" class="w-11 h-11 rounded-2xl bg-blue-50 border border-blue-200 flex flex-col items-center justify-center text-center shadow-2xs hover:scale-105 transition">
                    <span class="text-[9px] font-bold text-[#1D4ED8] leading-none">🔤 0</span>
                    <span class="text-[7.5px] text-[#1D4ED8] font-bold leading-none mt-0.5">শব্দ</span>
                </a>
                <a href="{{ route('quiz.index') }}" class="w-11 h-11 rounded-2xl bg-purple-50 border border-purple-200 flex flex-col items-center justify-center text-center shadow-2xs hover:scale-105 transition">
                    <span class="text-[9px] font-bold text-[#6D28D9] leading-none">✏️ 0</span>
                    <span class="text-[7.5px] text-[#6D28D9] font-bold leading-none mt-0.5">কুইজ</span>
                </a>
                <div class="w-11 h-11 rounded-2xl bg-amber-50 border border-amber-200 flex flex-col items-center justify-center text-center shadow-2xs">
                    <span class="text-[9px] font-bold text-[#B45309] leading-none">⏱️ 0মি</span>
                    <span class="text-[7.5px] text-[#B45309] font-bold leading-none mt-0.5">পড়া</span>
                </div>
            </div>

        </div>
    </div>

    <!-- 5. QUICK ACCESS MENU (6 3D Cards 01 to 06) -->
    <div>
        <div class="flex items-center justify-between mb-2 px-1 text-white">
            <h3 class="text-sm font-black flex items-center gap-1 drop-shadow">
                কুইক অ্যাকসেস মেনু
            </h3>
            <span class="text-[11px] text-emerald-200 font-bold">সব দেখুন ›</span>
        </div>

        <div class="grid grid-cols-3 gap-2">
            
            <!-- 01. ব্যাকরণ ও উচ্চারণ (Purple) -->
            <a href="{{ route('grammar.index') }}" class="relative rounded-2xl p-2.5 flex flex-col justify-between min-h-[96px] bg-gradient-to-br from-[#6D28D9] via-[#4C1D95] to-[#2E1065] text-white shadow-xl border border-purple-400/40 hover:scale-[1.03] transition overflow-hidden">
                <span class="absolute top-1.5 right-1.5 text-[8px] font-bold bg-white/20 px-1.5 py-0.2 rounded-md font-outfit">01</span>
                <div class="w-8 h-8 rounded-full bg-white/20 p-1 flex items-center justify-center shadow-inner">
                    <img src="{{ asset('assets/images/ic_card_grammar.webp') }}" class="w-6 h-6 object-contain">
                </div>
                <div>
                    <h4 class="text-xs font-black leading-tight text-white">ব্যাকরণ ও উচ্চারণ</h4>
                    <p class="text-[7.5px] text-purple-200 leading-tight mt-0.5">নিয়ম · উচ্চারণ · ৩ স্তর</p>
                </div>
                <span class="absolute bottom-1 right-2 text-sm text-white/80 font-black">›</span>
            </a>

            <!-- 02. ইতালিতে চলার কথা (Orange) -->
            <a href="{{ route('conversations.index') }}" class="relative rounded-2xl p-2.5 flex flex-col justify-between min-h-[96px] bg-gradient-to-br from-[#EA580C] via-[#C2410C] to-[#7C2D12] text-white shadow-xl border border-orange-400/40 hover:scale-[1.03] transition overflow-hidden">
                <span class="absolute top-1.5 right-1.5 text-[8px] font-bold bg-white/20 px-1.5 py-0.2 rounded-md font-outfit">02</span>
                <div class="w-8 h-8 rounded-full bg-white/20 p-1 flex items-center justify-center shadow-inner">
                    <img src="{{ asset('assets/images/ic_card_conversation.png') }}" class="w-6 h-6 object-contain">
                </div>
                <div>
                    <h4 class="text-xs font-black leading-tight text-white">ইতালিতে চলার কথা</h4>
                    <p class="text-[7.5px] text-orange-200 leading-tight mt-0.5">বাস্তব জীবনের কথা</p>
                </div>
                <span class="absolute bottom-1 right-2 text-sm text-white/80 font-black">›</span>
            </a>

            <!-- 03. নিয়মিত অনুশীলন (Red) -->
            <a href="{{ route('quiz.index') }}" class="relative rounded-2xl p-2.5 flex flex-col justify-between min-h-[96px] bg-gradient-to-br from-[#DC2626] via-[#B91C1C] to-[#7F1D1D] text-white shadow-xl border border-rose-400/40 hover:scale-[1.03] transition overflow-hidden">
                <span class="absolute top-1.5 right-1.5 text-[8px] font-bold bg-white/20 px-1.5 py-0.2 rounded-md font-outfit">03</span>
                <div class="w-8 h-8 rounded-full bg-white/20 p-1 flex items-center justify-center shadow-inner">
                    <img src="{{ asset('assets/images/ic_card_practice.webp') }}" class="w-6 h-6 object-contain">
                </div>
                <div>
                    <h4 class="text-xs font-black leading-tight text-white">নিয়মিত অনুশীলন</h4>
                    <p class="text-[7.5px] text-rose-200 leading-tight mt-0.5">প্রতিদিন অনুশীলন করুন</p>
                </div>
                <span class="absolute bottom-1 right-2 text-sm text-white/80 font-black">›</span>
            </a>

            <!-- 04. শব্দের অর্থ জানুন (Green) -->
            <a href="{{ route('words.index', ['category' => 'word_meaning']) }}" class="relative rounded-2xl p-2.5 flex flex-col justify-between min-h-[96px] bg-gradient-to-br from-[#059669] via-[#047857] to-[#064E3B] text-white shadow-xl border border-emerald-400/40 hover:scale-[1.03] transition overflow-hidden">
                <span class="absolute top-1.5 right-1.5 text-[8px] font-bold bg-white/20 px-1.5 py-0.2 rounded-md font-outfit">04</span>
                <div class="w-8 h-8 rounded-full bg-white/20 p-1 flex items-center justify-center shadow-inner">
                    <img src="{{ asset('assets/images/ic_card_meaning.webp') }}" class="w-6 h-6 object-contain">
                </div>
                <div>
                    <h4 class="text-xs font-black leading-tight text-white">শব্দের অর্থ জানুন</h4>
                    <p class="text-[7.5px] text-emerald-200 leading-tight mt-0.5">নতুন শব্দ শিখুন</p>
                </div>
                <span class="absolute bottom-1 right-2 text-sm text-white/80 font-black">›</span>
            </a>

            <!-- 05. বিপরীত শব্দ (Cyan/Blue) -->
            <a href="{{ route('words.index', ['category' => 'opposite']) }}" class="relative rounded-2xl p-2.5 flex flex-col justify-between min-h-[96px] bg-gradient-to-br from-[#0284C7] via-[#0369A1] to-[#0C4A6E] text-white shadow-xl border border-cyan-400/40 hover:scale-[1.03] transition overflow-hidden">
                <span class="absolute top-1.5 right-1.5 text-[8px] font-bold bg-white/20 px-1.5 py-0.2 rounded-md font-outfit">05</span>
                <div class="w-8 h-8 rounded-full bg-white/20 p-1 flex items-center justify-center shadow-inner">
                    <img src="{{ asset('assets/images/ic_card_opposite.webp') }}" class="w-6 h-6 object-contain">
                </div>
                <div>
                    <h4 class="text-xs font-black leading-tight text-white">বিপরীত শব্দ</h4>
                    <p class="text-[7.5px] text-cyan-200 leading-tight mt-0.5">বিপরীত শব্দ শিখুন</p>
                </div>
                <span class="absolute bottom-1 right-2 text-sm text-white/80 font-black">›</span>
            </a>

            <!-- 06. শব্দ ভাণ্ডার (Teal) -->
            <a href="{{ route('words.index') }}" class="relative rounded-2xl p-2.5 flex flex-col justify-between min-h-[96px] bg-gradient-to-br from-[#0D9488] via-[#0F766E] to-[#134E4A] text-white shadow-xl border border-teal-400/40 hover:scale-[1.03] transition overflow-hidden">
                <span class="absolute top-1.5 right-1.5 text-[8px] font-bold bg-white/20 px-1.5 py-0.2 rounded-md font-outfit">06</span>
                <div class="w-8 h-8 rounded-full bg-white/20 p-1 flex items-center justify-center shadow-inner">
                    <img src="{{ asset('assets/images/ic_card_vocabulary.webp') }}" class="w-6 h-6 object-contain">
                </div>
                <div>
                    <h4 class="text-xs font-black leading-tight text-white">শব্দ ভাণ্ডার</h4>
                    <p class="text-[7.5px] text-teal-200 leading-tight mt-0.5">নতুন শব্দ সংগ্রহ করুন</p>
                </div>
                <span class="absolute bottom-1 right-2 text-sm text-white/80 font-black">›</span>
            </a>

        </div>
    </div>

    <!-- 6. MISSIONS & DAILY REWARD (Live Screenshot Exact) -->
    <div class="grid grid-cols-1 sm:grid-cols-12 gap-2.5">
        
        <!-- Left: আজকের মিশন (7 cols) -->
        <div class="sm:col-span-7 bg-[#E8F5F0] rounded-3xl p-3 border border-emerald-200/90 shadow-lg flex flex-col justify-between">
            <div class="bg-[#0A5A43] text-white rounded-xl px-2.5 py-1 flex items-center justify-between text-xs font-bold mb-2 shadow-sm">
                <span>🎯 আজকের মিশন</span>
                <span class="text-[10px] text-emerald-200 font-mono">⏱ 10:15:42</span>
            </div>

            <div class="space-y-1 text-xs">
                <div class="bg-white/80 border border-emerald-100 rounded-xl px-2.5 py-1.5 flex items-center justify-between">
                    <span class="text-[#123B2D] font-bold">📗 শব্দ 0/১০ · +২০ XP</span>
                    <span class="text-[10px] text-slate-400 font-bold">0%</span>
                </div>
                <div class="bg-white/80 border border-emerald-100 rounded-xl px-2.5 py-1.5 flex items-center justify-between">
                    <span class="text-[#123B2D] font-bold">○ কুইজ 0/২ · +২৫ XP</span>
                    <span class="text-[10px] text-slate-400 font-bold">0%</span>
                </div>
                <div class="bg-white/80 border border-emerald-100 rounded-xl px-2.5 py-1.5 flex items-center justify-between">
                    <span class="text-[#123B2D] font-bold">○ অধ্যয়ন 0/১৫ মি. · +১৫ XP</span>
                    <span class="text-[10px] text-slate-400 font-bold">0%</span>
                </div>
                <div class="bg-white/80 border border-emerald-100 rounded-xl px-2.5 py-1.5 flex items-center justify-between">
                    <span class="text-[#123B2D] font-bold">🎁 তিনটি কাজ শেষ · +৫০ XP</span>
                    <span class="text-[10px] text-slate-400 font-bold">0%</span>
                </div>
            </div>
        </div>

        <!-- Right: দৈনিক রিওয়ার্ড Card with 3D Chest Artwork (5 cols) -->
        <div class="sm:col-span-5 relative rounded-3xl overflow-hidden shadow-xl border border-amber-300/60 p-3 bg-gradient-to-br from-amber-400 via-orange-400 to-amber-500 text-white flex flex-col justify-between min-h-[160px]">
            <img src="{{ asset('assets/images/home_daily_reward_card.webp') }}" class="absolute inset-0 w-full h-full object-cover opacity-25">
            
            <div class="relative z-10 flex items-center justify-between">
                <span class="text-xs font-black flex items-center gap-1 drop-shadow">
                    🎁 দৈনিক রিওয়ার্ড
                </span>
                <span class="text-[9px] font-bold bg-black/30 px-1.5 py-0.5 rounded-full font-outfit">
                    💎 0 🪙 100 🌟 60
                </span>
            </div>

            <div class="relative z-10 flex justify-center my-1">
                <img src="{{ asset('assets/images/reward_day1.png') }}" class="w-14 h-14 object-contain drop-shadow-xl animate-pulse">
            </div>

            <button onclick="claimReward()" class="relative z-10 w-full bg-gradient-to-r from-cyan-400 to-teal-400 hover:brightness-105 text-[#002D22] font-black text-xs py-1.5 rounded-xl shadow transition">
                সংগ্রহ করুন ›
            </button>
        </div>

    </div>

    <!-- 7. APP PICK / HARD WORD DISCOVERY (Live Screenshot Exact) -->
    <div class="bg-white rounded-3xl p-4 shadow-xl border border-slate-200/80 flex items-center justify-between gap-3">
        <div class="flex items-center gap-3">
            <div class="w-12 h-12 rounded-2xl bg-amber-50 border border-amber-200 flex items-center justify-center text-2xl flex-shrink-0 shadow-2xs">
                ✨
            </div>
            <div class="min-w-0">
                <span class="text-[10px] font-bold text-slate-500 flex items-center gap-1">
                    ✍️ ব্যাকরণ
                </span>
                <h4 class="text-sm sm:text-base font-black text-slate-900 font-outfit truncate">
                    A che ora apre l'ufficio post...
                </h4>
                <p class="text-xs text-slate-600 font-medium truncate">পোস্ট অফিস কয়টায় খোলে?</p>
            </div>
        </div>

        <a href="{{ route('words.index') }}" class="text-xs font-bold text-blue-600 hover:text-blue-800 flex-shrink-0 font-siliguri">
            চাপ দিন ›
        </a>
    </div>

</div>

<!-- Modals -->
<div id="streakModal" class="hidden fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4 font-siliguri">
    <div class="bg-white rounded-3xl p-5 max-w-sm w-full shadow-2xl border border-amber-200 text-center relative">
        <button onclick="closeModal('streakModal')" class="absolute top-3 right-3 text-slate-400 hover:text-slate-600 text-xl font-bold">×</button>
        <span class="text-4xl block mb-1">🔥</span>
        <h3 class="text-lg font-black text-slate-900">আপনার স্ট্রিক রেকর্ড</h3>
        <p class="text-xs text-slate-600 mt-1">প্রতিদিন অ্যাপ ব্যবহার করে আপনার ১ দিনের স্ট্রিক ধরে রাখুন।</p>
        <button onclick="closeModal('streakModal')" class="w-full mt-4 bg-[#0A5A43] text-white font-bold text-xs py-2.5 rounded-xl shadow">
            চালিয়ে যান
        </button>
    </div>
</div>

<div id="profileModal" class="hidden fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4 font-siliguri">
    <div class="bg-white rounded-3xl p-5 max-w-sm w-full shadow-2xl border border-emerald-200 text-center relative">
        <button onclick="closeModal('profileModal')" class="absolute top-3 right-3 text-slate-400 hover:text-slate-600 text-xl font-bold">×</button>
        <img src="{{ asset('assets/images/home_profile_boy_v2.webp') }}" class="w-18 h-18 rounded-full object-cover border-2 border-emerald-400 mx-auto mb-2 shadow">
        <h3 class="text-lg font-black text-slate-900">Guest Learner</h3>
        <p class="text-xs text-emerald-800 font-bold">লেভেল ১ · ইতালি প্রেমী</p>
        <a href="{{ route('profile') }}" class="w-full mt-4 block bg-[#0A5A43] text-white font-bold text-xs py-2.5 rounded-xl shadow">
            পূর্ণ প্রোফাইল দেখুন →
        </a>
    </div>
</div>

<script>
    function claimReward() {
        document.getElementById('homeGems').innerText = '20';
        document.getElementById('homeCoins').innerText = '100';
        alert('🎉 অভিনন্দন! আপনি ২০টি ডায়মন্ড ও ১০০টি কয়েন পেয়েছেন!');
    }
    function openStreakModal() { document.getElementById('streakModal').classList.remove('hidden'); }
    function openProfileModal() { document.getElementById('profileModal').classList.remove('hidden'); }
    function closeModal(id) { document.getElementById(id).classList.add('hidden'); }
</script>
@endsection