@extends('layouts.app', ['title' => 'স্তর — ইতালিয়ান ভাষা কোর্স লেভেল'])

@section('content')
<div class="space-y-4 w-full -mx-1 sm:mx-0">
    <!-- Header (fragment_level.xml) -->
    <div class="bg-white rounded-2xl py-3.5 px-4 shadow-sm border border-slate-100 flex items-center justify-center">
        <h2 class="text-lg sm:text-xl font-black text-[#1A1A2E] font-siliguri">স্তর</h2>
    </div>

    <!-- Levels List (fragment_level.xml) -->
    <div class="space-y-4">
        @php
            $levelConfigs = [
                'A0' => [
                    'badge_bg' => '#FFF3E0', 'badge_color' => '#E67E22', 'status' => 'Available', 'status_color' => '#27AE60',
                    'title' => 'A0 - Beginner', 'desc' => 'শুরু থেকে সম্পূর্ণ নতুনভাবে ইতালিয়ান শেখা শুরু করুন।',
                    'tag1' => '📚 5 chapters', 'tag2' => '📚 5 অধ্যায় · 📄 60 পৃষ্ঠা',
                    'progress' => 0, 'locked' => false, 'btn_text' => 'START LEARNING', 'btn_bg' => '#27AE60'
                ],
                'A1' => [
                    'badge_bg' => '#E8F5E9', 'badge_color' => '#27AE60', 'status' => '🔒 Locked', 'status_color' => '#999999',
                    'title' => 'A1 - Elementary', 'desc' => 'মৌলিক ভাবজ্ঞা ও দৈনন্দিন ব্যবহারের সহজ বাক্য দিয়ে ইতালিয়ান শেখা।',
                    'tag1' => '📚 10 chapters', 'tag2' => '✏️ ৪০ পাঠ · ৫০ পৃষ্ঠা',
                    'progress' => 0, 'locked' => true, 'btn_text' => '🔒 A0 পরীক্ষায় 82% প্রয়োজন', 'btn_bg' => '#CCCCCC'
                ],
                'A2' => [
                    'badge_bg' => '#E3F2FD', 'badge_color' => '#2196F3', 'status' => '🔒 Locked', 'status_color' => '#999999',
                    'title' => 'A2 - Elementary', 'desc' => 'পরিচিত বিষয়ে সহজ কথোপকথন ও নিয়মিত কাজের ইতালিয়ান বাক্য অনুশীলন করুন।',
                    'tag1' => '📚 6 chapters', 'tag2' => '💬 5,721 বাক্য · 277 পৃষ্ঠা',
                    'progress' => 0, 'locked' => true, 'btn_text' => '🔒 A1 পরীক্ষায় 82% প্রয়োজন', 'btn_bg' => '#CCCCCC'
                ],
                'B1' => [
                    'badge_bg' => '#F3E5F5', 'badge_color' => '#8E44AD', 'status' => '🔒 Locked', 'status_color' => '#999999',
                    'title' => 'B1 - Intermediate', 'desc' => 'স্বাধীনভাবে দৈনন্দিন, কর্মক্ষেত্র ও সামাজিক পরিস্থিতিতে ইতালিয়ান ব্যবহার করুন।',
                    'tag1' => '📚 6 chapters', 'tag2' => '📚 6 অধ্যায় · 💬 3,850 বাক্য · 210 পৃষ্ঠা',
                    'progress' => 0, 'locked' => true, 'btn_text' => '🔒 A2 পরীক্ষায় 82% প্রয়োজন', 'btn_bg' => '#CCCCCC'
                ],
                'B2' => [
                    'badge_bg' => '#FFF3E0', 'badge_color' => '#E67E22', 'status' => '🔒 Locked', 'status_color' => '#999999',
                    'title' => 'B2 - Upper Intermediate', 'desc' => 'জটিল লেখা, যুক্তি, পেশাগত যোগাযোগ ও স্বতঃস্ফূর্ত কথোপকথন অনুশীলন করুন।',
                    'tag1' => '📚 6 chapters', 'tag2' => '📚 6 অধ্যায় · 💬 4,766 বাক্য · 199 পৃষ্ঠা',
                    'progress' => 0, 'locked' => true, 'btn_text' => '🔒 B1 পরীক্ষায় 82% প্রয়োজন', 'btn_bg' => '#CCCCCC'
                ],
                'C1' => [
                    'badge_bg' => '#FFEBEE', 'badge_color' => '#C62828', 'status' => '🔒 Locked', 'status_color' => '#999999',
                    'title' => 'C1 - Advanced', 'desc' => 'একাডেমিক, পেশাগত ও সূক্ষ্ম অর্থবোধক উন্নত ইতালিয়ান দক্ষতা অর্জন করুন।',
                    'tag1' => '📚 6 chapters', 'tag2' => '📚 6 অধ্যায় · 💬 2,848 বাক্য · 191 পৃষ্ঠা',
                    'progress' => 0, 'locked' => true, 'btn_text' => '🔒 B2 পরীক্ষায় 82% প্রয়োজন', 'btn_bg' => '#CCCCCC'
                ]
            ];
        @endphp

        @foreach($levelConfigs as $lvl => $cfg)
        <div class="bg-white rounded-2xl p-5 shadow-sm border border-slate-100 flex flex-col justify-between">
            <!-- Top Tag & Status -->
            <div class="flex items-center justify-between mb-3">
                <span class="text-xs font-black px-3 py-1 rounded-md font-outfit" style="background-color: {{ $cfg['badge_bg'] }}; color: {{ $cfg['badge_color'] }};">
                    {{ $lvl }}
                </span>
                <span class="text-xs font-bold font-outfit" style="color: {{ $cfg['status_color'] }};">
                    {{ $cfg['status'] }}
                </span>
            </div>

            <!-- Title & Subtitle -->
            <div>
                <h3 class="text-lg font-black text-[#1A1A2E] font-outfit mb-1">
                    {{ $cfg['title'] }}
                </h3>
                <p class="text-xs text-[#666666] leading-relaxed mb-3">
                    {{ $cfg['desc'] }}
                </p>
            </div>

            <!-- Meta Pills -->
            <div class="flex flex-wrap items-center gap-2 mb-3">
                <span class="text-xs text-[#555555] bg-[#F0F0F0] px-2.5 py-1 rounded-md font-outfit">
                    {{ $cfg['tag1'] }}
                </span>
                <span class="text-xs text-[#555555] bg-[#F0F0F0] px-2.5 py-1 rounded-md">
                    {{ $cfg['tag2'] }}
                </span>
            </div>

            <!-- Progress Bar -->
            <div class="w-full bg-[#EEEEEE] rounded-full h-1.5 mb-3.5 overflow-hidden">
                <div class="bg-[#27AE60] h-full rounded-full" style="width: {{ $cfg['progress'] }}%"></div>
            </div>

            <!-- Start / Unlock Button -->
            <a href="{{ route('courses.show', $lvl) }}" 
               class="w-full h-12 flex items-center justify-center rounded-xl font-bold text-sm text-white transition font-outfit shadow-sm"
               style="background-color: {{ $cfg['btn_bg'] }};">
                {{ $cfg['btn_text'] }}
            </a>
        </div>
        @endforeach
    </div>
</div>
@endsection