{{-- ======================================================
     COURSES SECTION — fully dynamic from DB
     $courses is passed from the home route in web.php
     ====================================================== --}}

<section id="courses" class="py-20 bg-gray-50">
    <div class="container mx-auto px-4 lg:px-8">

        {{-- Section Header --}}
        <div class="text-center max-w-3xl mx-auto mb-16" data-aos="fade-up">
            <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold mb-4"
                  style="background:rgba(2,127,197,0.08);color:#027fc5;">
                <i class="fas fa-graduation-cap mr-2"></i>Our Programs
            </span>
            <h2 class="text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4">
                Popular
                <span class="text-[#027fc5]"
                      >
                    Courses
                </span>
            </h2>
            <p class="text-lg text-gray-600">
                Industry-recognised certifications designed to launch your international caregiving career
            </p>
        </div>

        {{-- Courses Grid --}}
        @if($courses->isEmpty())
        <div class="text-center py-16 text-gray-400">
            <i class="fas fa-graduation-cap text-5xl mb-4"></i>
            <p class="text-lg">No courses available yet. Check back soon!</p>
        </div>
        @else
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @foreach($courses as $i => $course)
            <div class="group bg-white rounded-3xl shadow-lg hover:shadow-2xl overflow-hidden transition-all duration-300 hover:-translate-y-2"
                 data-aos="fade-up"
                 data-aos-delay="{{ ($i % 3) * 100 }}">

                {{-- Course Image / Brand Banner --}}
                <div class="relative h-56 overflow-hidden bg-[#027fc5]">
                    <div class="absolute inset-0 bg-black/20"></div>

                    @if($course->featured_image && file_exists(public_path('uploads/courses/'.$course->featured_image)))
                        <img src="{{ asset('uploads/courses/'.$course->featured_image) }}"
                             alt="{{ $course->title }}"
                             class="absolute inset-0 w-full h-full object-cover"
                             loading="lazy">
                        <div class="absolute inset-0 bg-black/30"></div>
                    @else
                        <div class="absolute inset-0 flex items-center justify-center">
                            <i class="{{ $course->icon_class ?? 'fas fa-graduation-cap' }} text-white text-7xl opacity-20"></i>
                        </div>
                    @endif

                    {{-- Badges --}}
                    <div class="absolute top-4 left-4 flex flex-wrap gap-2 z-10">
                        @if($course->duration)
                        <span class="px-3 py-1 bg-white/90 backdrop-blur-sm text-xs font-bold rounded-full" style="color:#027fc5;">
                            <i class="fas fa-clock mr-1"></i>{{ $course->duration }}
                        </span>
                        @endif
                        @if($course->certification)
                        <span class="px-3 py-1 bg-yellow-400 text-yellow-900 text-xs font-bold rounded-full">
                            <i class="fas fa-certificate mr-1"></i>{{ $course->certification }}
                        </span>
                        @endif
                    </div>

                    @if($course->is_featured)
                    <div class="absolute bottom-4 right-4 z-10">
                        <span class="px-3 py-1 text-white text-xs font-bold rounded-full"
                              style="background:#027fc5;">
                            <i class="fas fa-star mr-1"></i>Most Popular
                        </span>
                    </div>
                    @endif
                </div>

                {{-- Card Body --}}
                <div class="p-6">
                    <h3 class="text-xl font-bold text-gray-900 mb-3 group-hover:transition-colors"
                        style="transition:color 0.2s;"
                        onmouseover="this.style.color='#027fc5'" onmouseout="this.style.color=''">
                        {{ $course->title }}
                    </h3>

                    <p class="text-gray-600 text-sm mb-5 leading-relaxed">
                        {{ Str::limit($course->short_description, 130) }}
                    </p>

                    {{-- Course Details --}}
                    <div class="space-y-2 mb-5">
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-calendar-alt w-5 flex-shrink-0" style="color:#027fc5;"></i>
                            <span class="ml-2">
                                Starting:&nbsp;
                                <strong class="text-gray-700">{{ $course->formatted_starting_date }}</strong>
                            </span>
                        </div>
                        @if($course->mode)
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-map-marker-alt w-5 flex-shrink-0" style="color:#027fc5;"></i>
                            <span class="ml-2">{{ $course->mode }}</span>
                        </div>
                        @endif
                        @if($course->max_students)
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-users w-5 flex-shrink-0" style="color:#027fc5;"></i>
                            <span class="ml-2">Limited to <strong class="text-gray-700">{{ $course->max_students }}</strong> students</span>
                        </div>
                        @endif
                    </div>

                    {{-- Action Buttons --}}
                    <div class="flex gap-3">
                        <a href="{{ route('course.show', $course->slug) }}"
                           class="flex-1 text-center px-4 py-3 bg-gray-100 text-gray-700 rounded-xl font-semibold hover:bg-gray-200 transition-all duration-200 text-sm">
                            Learn More
                        </a>
                        <a href="{{ route('course.show', $course->slug) }}#course-application"
                           class="flex-1 bg-[#027fc5] text-center px-4 py-3 rounded-xl font-semibold transition-all duration-200 shadow-md hover:shadow-lg text-sm text-white"
                           >
                            Apply Now
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        {{-- View All Courses Button --}}
        <div class="text-center mt-12" data-aos="fade-up">
            <a href="{{ route('course.index') }}"
               class="inline-flex items-center space-x-2 px-8 py-4 bg-white rounded-full font-bold text-lg shadow-md hover:shadow-xl transition-all duration-300 border-2"
               style="border-color:#027fc5;color:#027fc5;"
               onmouseover="this.style.background='#027fc5';this.style.color='white';"
               onmouseout="this.style.background='white';this.style.color='#027fc5';">
                <span>View All Courses</span>
                <i class="fas fa-arrow-right"></i>
            </a>
        </div>
        @endif

    </div>
</section>