
<section class="py-20 lg:py-28 bg-white relative overflow-hidden">
    <!-- Decorative Elements -->
    <div class="absolute top-0 right-0 w-64 h-64 bg-yellow-100 rounded-full filter blur-3xl opacity-30"></div>
    <div class="absolute bottom-0 left-0 w-64 h-64 bg-indigo-100 rounded-full filter blur-3xl opacity-30"></div>
    
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <!-- Section Header -->
        <div class="text-center max-w-3xl mx-auto mb-16">
            <span class="inline-block px-4 py-1.5 bg-yellow-100 text-yellow-700 text-xs font-semibold rounded-full uppercase tracking-wider mb-4">
                🎓 Academic Programs
            </span>
            <h2 class="text-3xl lg:text-4xl xl:text-5xl font-bold text-gray-900 mb-6">
                Featured 
                <span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-600 to-orange-600">
                    Courses
                </span>
            </h2>
            <p class="text-lg lg:text-xl text-gray-600">
                Explore popular courses from top universities worldwide, designed for international students
            </p>
        </div>
        
        <!-- Course Filter Tabs -->
        <div class="flex flex-wrap justify-center gap-3 mb-16" 
             x-data="{ activeTab: 'all' }" 
             x-init="$watch('activeTab', value => filterCourses(value))">
            
            <button @click="activeTab = 'all'" 
                    :class="activeTab === 'all' ? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-xl scale-105' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                    class="px-6 py-3 rounded-full font-medium transition-all duration-300 shadow-md hover:shadow-lg flex items-center">
                <svg class="w-4 h-4 mr-2" :class="activeTab === 'all' ? 'text-white' : 'text-gray-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
                </svg>
                All Courses
            </button>
            
            <button @click="activeTab = 'engineering'" 
                    :class="activeTab === 'engineering' ? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-xl scale-105' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                    class="px-6 py-3 rounded-full font-medium transition-all duration-300 shadow-md hover:shadow-lg">
                🔧 Engineering
            </button>
            
            <button @click="activeTab = 'business'" 
                    :class="activeTab === 'business' ? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-xl scale-105' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                    class="px-6 py-3 rounded-full font-medium transition-all duration-300 shadow-md hover:shadow-lg">
                💼 Business
            </button>
            
            <button @click="activeTab = 'cs'" 
                    :class="activeTab === 'cs' ? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-xl scale-105' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                    class="px-6 py-3 rounded-full font-medium transition-all duration-300 shadow-md hover:shadow-lg">
                💻 Computer Science
            </button>
            
            <button @click="activeTab = 'medical'" 
                    :class="activeTab === 'medical' ? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-xl scale-105' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                    class="px-6 py-3 rounded-full font-medium transition-all duration-300 shadow-md hover:shadow-lg">
                🏥 Medical
            </button>
            
            <button @click="activeTab = 'arts'" 
                    :class="activeTab === 'arts' ? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-xl scale-105' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                    class="px-6 py-3 rounded-full font-medium transition-all duration-300 shadow-md hover:shadow-lg">
                🎨 Arts & Design
            </button>
        </div>
        
        <!-- Course Cards Grid -->
        <div x-data="{ 
            courses: [
                {
                    id: 1,
                    title: 'MSc in Computer Science',
                    university: 'Stanford University',
                    country: 'USA',
                    duration: '2 years',
                    tuition: '$55,000/year',
                    type: 'cs',
                    rating: 4.9,
                    students: 320,
                    image: 'cs-course.jpg',
                    scholarship: true
                },
                {
                    id: 2,
                    title: 'MBA - Master of Business Administration',
                    university: 'Harvard Business School',
                    country: 'USA',
                    duration: '2 years',
                    tuition: '$73,440/year',
                    type: 'business',
                    rating: 4.9,
                    students: 930,
                    image: 'mba.jpg',
                    scholarship: true
                },
                {
                    id: 3,
                    title: 'MEng in Mechanical Engineering',
                    university: 'MIT',
                    country: 'USA',
                    duration: '2 years',
                    tuition: '$53,790/year',
                    type: 'engineering',
                    rating: 4.8,
                    students: 420,
                    image: 'mechanical.jpg',
                    scholarship: false
                },
                {
                    id: 4,
                    title: 'MD in Medicine',
                    university: 'University of Oxford',
                    country: 'UK',
                    duration: '4 years',
                    tuition: '£39,750/year',
                    type: 'medical',
                    rating: 4.9,
                    students: 210,
                    image: 'medicine.jpg',
                    scholarship: true
                },
                {
                    id: 5,
                    title: 'BA in Digital Design',
                    university: 'Royal College of Art',
                    country: 'UK',
                    duration: '1 year',
                    tuition: '£32,000/year',
                    type: 'arts',
                    rating: 4.7,
                    students: 180,
                    image: 'design.jpg',
                    scholarship: false
                },
                {
                    id: 6,
                    title: 'MSc in Data Science',
                    university: 'ETH Zurich',
                    country: 'Switzerland',
                    duration: '1.5 years',
                    tuition: 'CHF 1,220/year',
                    type: 'cs',
                    rating: 4.8,
                    students: 290,
                    image: 'datascience.jpg',
                    scholarship: true
                },
                {
                    id: 7,
                    title: 'Master of Finance',
                    university: 'London Business School',
                    country: 'UK',
                    duration: '1 year',
                    tuition: '£45,000/year',
                    type: 'business',
                    rating: 4.8,
                    students: 150,
                    image: 'finance.jpg',
                    scholarship: true
                },
                {
                    id: 8,
                    title: 'MSc in Civil Engineering',
                    university: 'University of Toronto',
                    country: 'Canada',
                    duration: '2 years',
                    tuition: 'CAD 42,000/year',
                    type: 'engineering',
                    rating: 4.6,
                    students: 230,
                    image: 'civil.jpg',
                    scholarship: false
                }
            ],
            filteredCourses: [],
            filterCourses(tab) {
                if (tab === 'all') {
                    this.filteredCourses = this.courses.slice(0, 4);
                } else {
                    this.filteredCourses = this.courses.filter(c => c.type === tab).slice(0, 4);
                }
            }
        }"
        x-init="filteredCourses = courses.slice(0, 4); $watch('activeTab', value => filterCourses(value))">
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <template x-for="course in filteredCourses" :key="course.id">
                    <div class="group bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 overflow-hidden border border-gray-100">
                        <!-- Course Image -->
                        <div class="relative h-48 bg-gradient-to-br from-indigo-900 to-purple-900 overflow-hidden">
                            <div class="absolute inset-0 opacity-30">
                                <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
                                    <pattern id="course-pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                                        <circle cx="2" cy="2" r="1" class="fill-white"/>
                                    </pattern>
                                    <rect width="100" height="100" fill="url(#course-pattern)"/>
                                </svg>
                            </div>
                            
                            <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
                            
                            <!-- Scholarship Badge -->
                            <div x-show="course.scholarship" 
                                 x-transition
                                 class="absolute top-3 left-3">
                                <span class="px-3 py-1.5 bg-gradient-to-r from-yellow-500 to-yellow-600 text-white text-xs font-bold rounded-full shadow-lg">
                                    🎓 Scholarship Available
                                </span>
                            </div>
                            
                            <!-- University Logo Placeholder -->
                            <div class="absolute bottom-3 left-3 flex items-center">
                                <div class="w-10 h-10 bg-white/90 backdrop-blur-sm rounded-lg flex items-center justify-center shadow-lg">
                                    <span class="text-indigo-700 font-bold text-sm" x-text="course.university.substring(0, 2)"></span>
                                </div>
                                <div class="ml-2">
                                    <p class="text-white text-sm font-semibold" x-text="course.university"></p>
                                    <p class="text-white/80 text-xs" x-text="course.country"></p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="p-5">
                            <!-- Course Title -->
                            <h3 class="font-bold text-gray-900 mb-2 line-clamp-2 h-14" x-text="course.title"></h3>
                            
                            <!-- Course Meta -->
                            <div class="flex items-center justify-between mb-3">
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                    </svg>
                                    <span class="text-sm font-medium text-gray-700" x-text="course.rating"></span>
                                </div>
                                <div class="flex items-center text-gray-500 text-xs">
                                    <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <span x-text="course.duration"></span>
                                </div>
                            </div>
                            
                            <!-- Stats -->
                            <div class="grid grid-cols-2 gap-2 mb-4">
                                <div class="bg-gray-50 rounded-lg p-2 text-center">
                                    <p class="text-xs text-gray-500 mb-1">Tuition</p>
                                    <p class="font-semibold text-gray-900 text-sm" x-text="course.tuition"></p>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-2 text-center">
                                    <p class="text-xs text-gray-500 mb-1">Students</p>
                                    <p class="font-semibold text-gray-900 text-sm" x-text="course.students"></p>
                                </div>
                            </div>
                            
                            <!-- Action Button -->
                            <a href="#" class="inline-flex items-center justify-center w-full px-4 py-2.5 bg-indigo-50 hover:bg-indigo-600 text-indigo-600 hover:text-white font-semibold rounded-xl transition group">
                                <span>View Course</span>
                                <svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        
        <div class="text-center mt-16">
            <a href="<?php echo e(url('programs.index')); ?>" 
               class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-semibold rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl group">
                <span>Browse All Courses</span>
                <svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                </svg>
            </a>
        </div>
    </div>
</section><?php /**PATH D:\Sasi\resources\views\home\partials\featured-courses.blade.php ENDPATH**/ ?>