@php
    $isArabic = app()->getLocale() === 'ar';
    $displayTitle = $course->subject?->name ?: $course->name;
    $courseProgress = min(100, max(0, (int) ($course->student_progress ?? 0)));
    $teacherName = $course->teacher?->name ?: trim(($course->teacher?->first_name ?? '') . ' ' . ($course->teacher?->last_name ?? ''));
@endphp

<section class="relative overflow-hidden rounded-[2.4rem] border border-primary/10 bg-white shadow-playful dark:border-zinc-800 dark:bg-zinc-900">
    <div class="absolute inset-0 bg-[linear-gradient(135deg,_rgb(var(--student-primary))_0%,_rgb(var(--student-primary-dark))_100%)]"></div>
    <div class="absolute inset-y-0 start-0 w-1/2 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.28),_transparent_60%)]"></div>
    <div class="absolute -end-12 top-1/2 h-40 w-40 -translate-y-1/2 rounded-full bg-white/10 blur-3xl"></div>

    <div class="relative grid gap-6 p-6 text-white sm:p-8 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-end">
        <div class="space-y-5">
            <span class="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-4 py-2 text-xs font-black backdrop-blur-sm">
                <i class="fa-solid fa-book-open"></i>
                <span>{{ $isArabic ? 'المادة الدراسية' : 'Course' }}</span>
            </span>

            <div class="space-y-3">
                <h1 class="max-w-3xl text-3xl font-black leading-tight md:text-5xl">{{ $displayTitle }}</h1>

                @if ($teacherName)
                    <div class="inline-flex max-w-full items-center gap-3 rounded-[1.4rem] border border-white/15 bg-white/10 px-4 py-3 backdrop-blur-sm">
                        <span class="flex h-11 w-11 items-center justify-center rounded-2xl bg-white/10">
                            <i class="fa-solid fa-user-tie text-sm"></i>
                        </span>
                        <div class="min-w-0">
                            <div class="text-[11px] font-black uppercase tracking-[0.24em] text-white/60">{{ $isArabic ? 'المعلم' : 'Teacher' }}</div>
                            <div class="truncate text-base font-black text-white">{{ $teacherName }}</div>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <div class="rounded-[2rem] border border-white/15 bg-white/10 p-5 backdrop-blur-md">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <div class="text-[11px] font-black uppercase tracking-[0.24em] text-white/60">{{ $isArabic ? 'تقدم الطالب' : 'Student progress' }}</div>
                    <div class="mt-2 text-4xl font-black font-numbers text-white">{{ $courseProgress }}%</div>
                </div>
                <span class="flex h-14 w-14 items-center justify-center rounded-2xl bg-white/10">
                    <i class="fa-solid fa-chart-simple text-xl"></i>
                </span>
            </div>

            <div class="mt-5 h-3 overflow-hidden rounded-full bg-white/15"
                 role="progressbar" aria-valuenow="{{ $courseProgress }}" aria-valuemin="0" aria-valuemax="100">
                <div class="h-full rounded-full bg-white transition-all duration-500" style="width: {{ $courseProgress }}%"></div>
            </div>

            <div class="mt-3 flex items-center justify-between text-sm font-bold text-white/75">
                <span>{{ $isArabic ? 'نسبة الإنجاز الحالية' : 'Current completion' }}</span>
                <span class="font-numbers">{{ $courseProgress }}/100</span>
            </div>
        </div>
    </div>
</section>