@if($featuredCourses && $featuredCourses->count() > 0)
<!-- Courses Start -->
<div class="container-xxl courses my-6 py-6 pb-0">
    <div class="container">
        <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
            <h6 class="text-primary text-uppercase mb-2">{{ __('courses.trending_courses') }}</h6>
            <h1 class="display-6 mb-4">{{ __('courses.upskill_you') }}</h1>
        </div>
        <div class="row g-4 justify-content-center">
            @foreach($featuredCourses as $course)
            <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                <div class="courses-item d-flex flex-column bg-white overflow-hidden h-100">
                    <div class="text-center p-4 pt-0">
                        <div class="d-inline-block bg-primary text-white fs-5 py-1 px-4 mb-4">{{ __('courses.price_format', ['price' => $course->price ?? 99]) }}</div>
                        <h5 class="mb-3">{{ $course->title }}</h5>
                        <p>{{ $course->description }}</p>
                        <ol class="breadcrumb justify-content-center mb-0">
                            <li class="breadcrumb-item small"><i class="fa fa-signal text-primary me-2"></i>{{ $course->localized_level ?? __('courses.beginner') }}</li>
                            <li class="breadcrumb-item small"><i class="fa fa-calendar-alt text-primary me-2"></i>{{ $course->duration ?? '3' }} {{ __('courses.week') }}</li>
                        </ol>
                    </div>
                    <div class="position-relative mt-auto">
                        <img class="img-fluid" src="{{ $course->featured_image ? asset('storage/' . $course->featured_image) : asset('img/drivin/courses-1.jpg') }}" alt="{{ $course->title }}">
                        <div class="courses-overlay">
                            <a class="btn btn-outline-primary border-2" href="{{ route('courses.show', ['locale' => app()->getLocale(), 'id' => $course->id]) }}">{{ __('courses.read_more') }}</a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
<!-- Courses End -->
@endif