// LiveClasses.jsx - Enhanced Live Classes Section
function LiveClasses({ onEnroll }) {
    const classTypes = [
        {
            id: 'individual',
            title: 'Individual Classes',
            description: 'One-on-one personalized attention tailored to your artistic goals. Perfect for focused learning at your own pace.',
            features: ['Personalized curriculum', 'Flexible scheduling', 'Direct feedback', 'Custom pace'],
            price: 'From $45/hr',
            icon: (
                <svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
            ),
            bg: 'bg-rose-50'
        },
        {
            id: 'group',
            title: 'Group Classes',
            description: 'Learn alongside peers in small groups. Share ideas, get inspired, and grow together in a collaborative environment.',
            features: ['Small groups (4-8 students)', 'Peer learning', 'Interactive sessions', 'Affordable pricing'],
            price: 'From $20/hr',
            icon: (
                <svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                </svg>
            ),
            bg: 'bg-emerald-50'
        },
        {
            id: 'masterclass',
            title: 'Masterclass Series',
            description: 'Intensive workshops focused on specific techniques and subjects. Deep dive into specialized topics with expert guidance.',
            features: ['Expert techniques', 'Certificate included', 'Recording access', 'Q&A sessions'],
            price: 'From $150',
            icon: (
                <svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                </svg>
            ),
            bg: 'bg-amber-50'
        }
    ];

    return (
        <section id="classes" className="py-20 bg-cream relative overflow-hidden">
            {/* Decorative elements */}
            <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-crimson/20 to-transparent"></div>

            <div className="max-w-7xl mx-auto px-6 lg:px-8 relative z-10">
                {/* Section Header */}
                <div className="text-center mb-20">
                    <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">
                            Live Classes
                        </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 in real-time with personalized guidance from anywhere in the world. Choose the format that suits your learning style.
                    </p>
                </div>

                <div className="grid lg:grid-cols-3 gap-8">
                    {classTypes.map((type, index) => (
                        <div
                            key={type.id}
                            className={`group bg-white rounded-3xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-3 border border-border-gray hover-lift relative overflow-hidden`}
                            style={{ animationDelay: `${index * 100}ms` }}
                        >
                            {/* Accent bar */}
                            <div className="absolute top-0 left-0 w-2 h-full bg-gradient-to-b from-transparent via-crimson to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

                            <div className={`w-16 h-16 ${type.bg} rounded-2xl flex items-center justify-center mb-6 text-crimson group-hover:scale-110 transition-transform duration-300`}>
                                {type.icon}
                            </div>

                            <h3 className="font-serif text-2xl font-semibold text-charcoal mb-4 group-hover:text-crimson transition-colors">
                                {type.title}
                            </h3>

                            <p className="text-charcoal-light mb-6 leading-relaxed">
                                {type.description}
                            </p>

                            <ul className="space-y-3 mb-8">
                                {type.features.map((feature, featureIndex) => (
                                    <li key={featureIndex} className="flex items-start gap-3 text-charcoal-light">
                                        <div className={`flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center mt-0.5 ${
                                            type.id === 'individual' ? 'bg-rose-100 text-rose-600' :
                                            type.id === 'group' ? 'bg-emerald-100 text-emerald-600' :
                                            'bg-amber-100 text-amber-600'
                                        }`}>
                                            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                                            </svg>
                                        </div>
                                        <span className="text-sm leading-relaxed">{feature}</span>
                                    </li>
                                ))}
                            </ul>

                            <div className="flex items-center justify-between mb-6">
                                <span className="text-2xl font-serif font-bold text-charcoal">
                                    {type.price}
                                </span>
                                <div className="flex items-center gap-2 text-crimson font-medium text-sm">
                                    <span>Learn more</span>
                                    <svg className="w-4 h-4 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                                    </svg>
                                </div>
                            </div>

                            <button
                                onClick={() => onEnroll && onEnroll({ title: type.title, description: type.description, price: type.price })}
                                className={`w-full py-4 rounded-xl font-semibold transition-all shadow-lg hover:shadow-xl ${
                                    type.id === 'individual' ? 'bg-rose-500 text-white hover:bg-rose-600' :
                                    type.id === 'group' ? 'bg-emerald-500 text-white hover:bg-emerald-600' :
                                    'bg-amber-500 text-white hover:bg-amber-600'
                                }`}
                            >
                                Book Now
                            </button>
                        </div>
                    ))}
                </div>

                {/* Trust Indicators */}
                <div className="mt-16 pt-12 border-t border-border-gray">
                    <p className="text-center text-charcoal-light mb-6">Trusted by students from around the world</p>
                    <div className="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-60 grayscale hover:grayscale-0 transition-all duration-500">
                        {['Student', 'Artist', 'Learner', 'Creator', 'Visionary'].map((word, i) => (
                            <span key={i} className="text-2xl md:text-3xl font-serif font-bold text-charcoal-light">{word}</span>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
}

window.LiveClasses = LiveClasses;