@php
    $isArabic = app()->getLocale() === 'ar';

    // Use withCount values loaded in controller — zero DB queries here
    $courseSections = [
        [
            'route' => 'student.courses.show',
            'label' => $isArabic ? 'الرئيسية' : 'Overview',
            'icon' => 'fa-timeline',
            'count' => ($course->materials_count ?? 0) + ($course->virtual_class_rooms_count ?? 0) + ($course->quizzes_count ?? 0) + ($course->assignments_count ?? 0),
            'active_patterns' => ['student.courses.show'],
        ],
        [
            'route' => 'student.courses.materials.index',
            'label' => $isArabic ? 'مواد' : 'Materials',
            'icon' => 'fa-folder-open',
            'count' => $course->materials_count ?? 0,
            'active_patterns' => ['student.courses.materials.index', 'student.courses.materials.show'],
        ],
        [
            'route' => 'student.courses.virtual-class-rooms.index',
            'label' => $isArabic ? 'فصول افتراضية' : 'Live Classes',
            'icon' => 'fa-video',
            'count' => $course->virtual_class_rooms_count ?? 0,
            'active_patterns' => ['student.courses.virtual-class-rooms.index', 'student.courses.virtual-class-rooms.show', 'student.courses.virtual-class-room.show'],
        ],
        [
            'route' => 'student.courses.quizzes.index',
            'label' => $isArabic ? 'اختبارات' : 'Quizzes',
            'icon' => 'fa-clipboard-question',
            'count' => $course->quizzes_count ?? 0,
            'active_patterns' => ['student.courses.quizzes.index', 'student.courses.quizzes.show', 'student.courses.quizzes.result'],
        ],
        [
            'route' => 'student.courses.assignments.index',
            'label' => $isArabic ? 'مهام' : 'Assignments',
            'icon' => 'fa-list-check',
            'count' => $course->assignments_count ?? 0,
            'active_patterns' => ['student.courses.assignments.index', 'student.courses.assignments.show'],
        ],
        [
            'route' => 'student.courses.attendance.index',
            'label' => $isArabic ? 'الحضور' : 'Attendance',
            'icon' => 'fa-user-check',
            'count' => $course->attendance_count ?? 0,
            'active_patterns' => ['student.courses.attendance.index'],
        ],
        [
            'route' => 'student.courses.marks.index',
            'label' => $isArabic ? 'درجات' : 'Marks',
            'icon' => 'fa-award',
            'count' => $course->marks_count ?? 0,
            'active_patterns' => ['student.courses.marks.index', 'student.courses.marks.show'],
        ],
        [
            'route' => 'student.courses.inquiries.index',
            'label' => $isArabic ? 'استفسارات' : 'Inquiries',
            'icon' => 'fa-comments',
            'count' => $course->student_inquiries_count ?? 0,
            'active_patterns' => ['student.courses.inquiries.*'],
        ],
        [
            'route' => 'student.exams_v2.index',
            'label' => $isArabic ? 'اختبارات V2' : 'Exams V2',
            'icon' => 'fa-file-pen',
            'count' => $course->exams_v2_count ?? 0,
            'active_patterns' => ['student.exams_v2.*'],
        ],
    ];
@endphp

<section class="rounded-[2rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
    <div class="mb-4 flex items-center justify-between gap-4">
        <div>
            <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'أقسام المقرر' : 'Course Sections' }}</h2>
            <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'تنقل واضح بين كل أجزاء المادة.' : 'Clear navigation across every part of the course.' }}</p>
        </div>
    </div>

    <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
        @foreach ($courseSections as $section)
            @php $active = request()->routeIs(...$section['active_patterns']); @endphp
            <a href="{{ route($section['route'], $course->id) }}" class="group relative overflow-hidden rounded-[1.5rem] border px-4 py-4 text-decoration-none transition duration-200 {{ $active ? 'border-primary bg-primary-light/40 text-primary shadow-[0_18px_40px_-28px_rgba(9,91,236,0.9)] dark:border-primary/40 dark:bg-primary/10 dark:text-primary-container' : 'border-zinc-200 bg-zinc-50 text-zinc-700 hover:border-primary/30 hover:bg-white hover:text-primary dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-200 dark:hover:border-primary/30 dark:hover:bg-zinc-900 dark:hover:text-primary-container' }}">
                @if ($active)
                    <span class="absolute inset-y-0 {{ $isArabic ? 'right-0' : 'left-0' }} w-1 rounded-full bg-primary"></span>
                @endif
                <div class="flex items-start justify-between gap-3">
                    <div class="flex min-w-0 items-center gap-3">
                        <div class="flex h-11 w-11 items-center justify-center rounded-2xl transition {{ $active ? 'bg-white/75 dark:bg-zinc-900' : 'bg-white group-hover:bg-primary-light/50 dark:bg-zinc-900 dark:group-hover:bg-primary/10' }}">
                            <i class="fa-solid {{ $section['icon'] }}"></i>
                        </div>
                        <div class="min-w-0">
                            <div class="truncate text-sm font-black">{{ $section['label'] }}</div>
                            <div class="mt-1 text-xs font-bold {{ $active ? 'text-primary/80 dark:text-primary-container/80' : 'text-zinc-500 dark:text-zinc-400' }}">
                                {{ $active ? ($isArabic ? 'أنت هنا الآن' : 'You are here') : ($isArabic ? 'فتح القسم' : 'Open section') }}
                            </div>
                        </div>
                    </div>
                    <span class="shrink-0 rounded-full px-3 py-1 text-xs font-black font-numbers {{ $active ? 'bg-white text-primary dark:bg-zinc-900 dark:text-primary-container' : 'bg-white text-zinc-700 dark:bg-zinc-900 dark:text-zinc-200' }}">{{ $section['count'] }}</span>
                </div>
            </a>
        @endforeach
    </div>
</section>