{{-- resources/views/tests/weekly/partials/_hero.blade.php --}}
<div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-sky-50 via-white to-emerald-50 border border-slate-200 shadow-xl">
    <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-cyan-400/20 blur-3xl"></div>
    <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full bg-emerald-500/20 blur-3xl"></div>

    <div class="relative p-5 sm:p-7 lg:p-8 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">

        <div class="space-y-3 max-w-2xl">
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white border border-slate-200 text-[11px] text-slate-700 shadow-sm">
                <i class="fa-solid fa-clipboard-question text-xs"></i>
                <span>نظام الاختبارات الأسبوعية • غرفة الصقر</span>
            </div>

            <h1 class="text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight">
                الاختبارات الأسبوعية <span class="text-cyan-300">للأعضاء</span>
            </h1>

            <p class="text-[12px] sm:text-[14px] text-slate-500 leading-relaxed">
                هنا تظهر الاختبارات المتاحة حسب نوع عضويتك. زر الاختبار يتغير تلقائيًا حسب الوقت:
                <b>لم يبدأ بعد</b> / <b>متاح</b> / <b>انتهى</b>.
                <span class="text-slate-400">حلّك للاختبارات يُستخدم للتقييم وليس للعقاب.</span>
            </p>

            <div class="flex flex-wrap gap-2 pt-1">
                <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white border border-slate-200 text-[11px] text-slate-700">
                    <span class="w-1.5 h-1.5 rounded-full bg-cyan-400"></span>
                    إجمالي: {{ $totalCount }}
                </span>

                <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white border border-slate-200 text-[11px] text-slate-700">
                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
                    تم الحل: {{ $doneCount }}
                </span>

                <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white border border-slate-200 text-[11px] text-slate-700">
                    <span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
                    بانتظار الحل: {{ $pendingCount }}
                </span>
            </div>
        </div>

        <div class="w-full lg:w-auto">
            <div class="rounded-2xl bg-white border border-slate-200 shadow-sm px-4 py-3 space-y-2 text-xs text-slate-700">
                <div class="flex items-center gap-2">
                    <div class="w-9 h-9 rounded-xl bg-cyan-500/20 text-cyan-200 grid place-items-center">
                        <i class="fa-solid fa-user"></i>
                    </div>
                    <div class="min-w-0">
                        <div class="text-[11px] text-slate-300/80">العضو</div>
                        <div class="font-bold text-sm truncate">{{ $user->name }}</div>
                        <div class="text-[11px] text-slate-500 truncate">{{ $user->membership_status }}</div>
                    </div>
                </div>

                <div class="text-[11px] text-slate-500">
                    {{ now()->locale('ar')->isoFormat('dddd D MMMM YYYY — h:mm A') }}
                </div>

                <div class="text-[11px] text-slate-400">
                    * تظهر الاختبارات حسب صلاحياتك/عضويتك تلقائيًا.
                </div>
            </div>
        </div>

    </div>
</div>