// Courses.jsx - Enhanced Recorded Courses Section
const { useState } = React;

function Courses({ courses, onEnroll }) {
    const [activeFilter, setActiveFilter] = useState('All');
    const [activeLevel, setActiveLevel] = useState('All');

    const categories = ['All', 'Portrait', 'Landscape', 'Botanical', 'Sketching', 'Composition', 'Still Life'];
    const levels = ['All', 'Beginner', 'Intermediate', 'Advanced', 'All Levels'];

    const filteredCourses = courses.filter(course => {
        const categoryMatch = activeFilter === 'All' || course.category === activeFilter;
        const levelMatch = activeLevel === 'All' || course.level === activeLevel;
        return categoryMatch && levelMatch;
    });

    return (
        <section id="courses" className="py-20 bg-white relative">
            <div className="max-w-7xl mx-auto px-6 lg:px-8">
                {/* Section Header */}
                <div className="text-center mb-16">
                    <div className="inline-flex items-center gap-2 mb-4">
                        <div className="w-1.5 h-8 bg-crimson rounded-full"></div>
                        <h2 className="font-serif text-3xl md:text-4xl font-semibold text-charcoal">
                            Recorded Courses
                        </h2>
                        <div className="w-1.5 h-8 bg-gold rounded-full"></div>
                    </div>
                    <p className="text-lg text-charcoal-light max-w-2xl mx-auto">
                        Learn at your own pace with our comprehensive video courses. Access expert instruction anytime, anywhere.
                    </p>
                </div>

                {/* Filters */}
                <div className="mb-12">
                    {/* Category Filters */}
                    <div className="flex flex-wrap justify-center gap-2 mb-4">
                        {categories.map(category => (
                            <button
                                key={category}
                                onClick={() => setActiveFilter(category)}
                                className={`px-5 py-2.5 rounded-full text-sm font-medium transition-all duration-300 ${
                                    activeFilter === category
                                        ? 'bg-crimson text-white shadow-lg shadow-crimson/25'
                                        : 'bg-cream text-charcoal-light hover:bg-gold/20 hover:text-charcoal'
                                }`}
                            >
                                {category}
                            </button>
                        ))}
                    </div>
                    {/* Level Filters */}
                    <div className="flex flex-wrap justify-center gap-2">
                        {levels.map(level => (
                            <button
                                key={level}
                                onClick={() => setActiveLevel(level)}
                                className={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 ${
                                    activeLevel === level
                                        ? 'bg-indigo text-white shadow-lg shadow-indigo/25'
                                        : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                                }`}
                            >
                                {level}
                            </button>
                        ))}
                    </div>
                </div>

                {/* Course Grid */}
                <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
                    {filteredCourses.map((course, index) => (
                        <div
                            key={course.id}
                            className="group bg-cream rounded-2xl overflow-hidden shadow-base hover:shadow-xl transition-all duration-500 hover-lift"
                            style={{ animationDelay: `${index * 50}ms` }}
                        >
                            {/* Image Container */}
                            <div className="relative h-52 overflow-hidden">
                                {course.image ? (
                                    <img
                                        src={course.image}
                                        alt={course.title}
                                        className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                                    />
                                ) : (
                                    <div className="w-full h-full bg-gradient-to-br from-crimson/20 to-gold/20 flex items-center justify-center">
                                        <svg className="w-12 h-12 text-crimson/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                        </svg>
                                    </div>
                                )}
                                <div className="absolute inset-0 bg-gradient-to-t from-charcoal/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

                                {/* Badges */}
                                <div className="absolute top-4 left-4 right-4 flex justify-between items-start">
                                    {course.bestseller && (
                                        <span className="bg-gold text-white text-xs font-bold px-4 py-1.5 rounded-full shadow-lg flex items-center gap-1">
                                            <svg className="w-3 h-3" 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>
                                            Bestseller
                                        </span>
                                    )}
                                    <span className={`ml-auto text-xs font-semibold px-3 py-1.5 rounded-full ${
                                        course.level === 'Beginner' ? 'bg-emerald-500 text-white' :
                                        course.level === 'Intermediate' ? 'bg-blue-500 text-white' :
                                        course.level === 'Advanced' ? 'bg-purple-500 text-white' :
                                        'bg-gray-500 text-white'
                                    }`}>
                                        {course.level}
                                    </span>
                                </div>

                                {/* Quick Info Overlay */}
                                <div className="absolute bottom-4 left-4 right-4 opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300">
                                    <div className="flex items-center gap-2 text-white text-sm">
                                        <span className="flex items-center gap-1 bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full">
                                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                            </svg>
                                            {course.duration}
                                        </span>
                                    </div>
                                </div>
                            </div>

                            {/* Content */}
                            <div className="p-6">
                                <div className="mb-3">
                                    <span className="text-xs font-medium text-crimson uppercase tracking-wide">
                                        {course.category}
                                    </span>
                                </div>
                                <h3 className="font-serif text-xl font-semibold text-charcoal mb-3 leading-tight group-hover:text-crimson transition-colors">
                                    {course.title}
                                </h3>

                                <div className="flex items-center justify-between pt-4 border-t border-border-gray">
                                    <div>
                                        <span className="text-2xl font-serif font-bold text-charcoal">${course.price}</span>
                                        <span className="text-sm text-charcoal-light ml-1">USD</span>
                                    </div>
                                    <button
                                        onClick={() => onEnroll && onEnroll(course)}
                                        className="bg-crimson text-white px-5 py-2.5 rounded-lg font-medium hover:bg-crimson-dark transition-colors shadow-md hover:shadow-lg"
                                    >
                                        Enroll Now
                                    </button>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>

                {filteredCourses.length === 0 && (
                    <div className="text-center py-16">
                        <div className="w-20 h-20 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
                            <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <p className="text-charcoal-light text-lg font-medium">No courses found matching your criteria.</p>
                        <p className="text-charcoal-light/70 text-sm mt-1">Try adjusting your filters</p>
                    </div>
                )}
            </div>
        </section>
    );
}

window.Courses = Courses;