// UpcomingClasses.jsx - Enhanced Upcoming Classes Slider Component
const { useEffect, useRef, useState } = React;

function UpcomingClasses({ classes, onEnroll }) {
    const sliderRef = useRef(null);
    const [isPaused, setIsPaused] = useState(false);

    useEffect(() => {
        if (!sliderRef.current || isPaused) return;

        const slider = sliderRef.current;
        let animationId;
        let startTime;
        const speed = 50; // pixels per second

        const animate = (timestamp) => {
            if (!startTime) startTime = timestamp;
            const elapsed = timestamp - startTime;
            const scrollAmount = (elapsed * speed) / 1000;

            slider.scrollLeft = scrollAmount % (slider.scrollWidth / 2);

            animationId = requestAnimationFrame(animate);
        };

        animationId = requestAnimationFrame(animate);

        return () => {
            if (animationId) {
                cancelAnimationFrame(animationId);
            }
        };
    }, [isPaused]);

    const formatDate = (dateStr) => {
        if (dateStr === "Limited Time") return dateStr;
        const date = new Date(dateStr);
        return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
    };

    const handleEnrollClick = (cls) => {
        if (onEnroll) {
            onEnroll(cls);
        }
    };

    return (
        <section id="upcoming-classes" className="py-20 bg-cream">
            <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">
                            Upcoming 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">
                        Don't miss these exciting opportunities to learn from Arpita. Join our live classes and transform your artistic skills.
                    </p>
                </div>

                {/* Slider Container */}
                <div
                    ref={sliderRef}
                    className="overflow-x-auto scrollbar-hide"
                    style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
                    onMouseEnter={() => setIsPaused(true)}
                    onMouseLeave={() => setIsPaused(false)}
                >
                    <div className="flex gap-8 pb-6" style={{ width: 'fit-content' }}>
                        {/* Duplicate cards for infinite scroll effect */}
                        {[...classes, ...classes].map((cls, index) => (
                            <div
                                key={`${cls.id}-${index}`}
                                className={`flex-shrink-0 w-80 rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all transform hover:-translate-y-2 hover-lift ${
                                    cls.type === 'offer' ? 'bg-gradient-to-br from-gold to-yellow-500' : 'bg-white'
                                }`}
                            >
                                {cls.type !== 'offer' ? (
                                    <>
                                        {/* Image Container */}
                                        <div className="relative h-48 overflow-hidden">
                                            {cls.image ? (
                                                <img
                                                    src={cls.image}
                                                    alt={cls.title}
                                                    className="w-full h-full object-cover transition-transform duration-700 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 top-4 right-4">
                                                <span className={`text-xs font-bold px-4 py-2 rounded-full shadow-sm ${
                                                    cls.type === 'masterclass' ? 'bg-crimson text-white' : 'bg-indigo/90 text-white'
                                                }`}>
                                                    {cls.type === 'masterclass' ? 'MASTERCLASS' : cls.type === 'individual' ? 'INDIVIDUAL' : 'GROUP CLASS'}
                                                </span>
                                            </div>
                                        </div>

                                        {/* Content */}
                                        <div className="p-6">
                                            <h3 className="font-serif font-semibold text-charcoal text-xl mb-3 leading-tight">
                                                {cls.title}
                                            </h3>
                                            <div className="flex items-center gap-4 text-sm text-charcoal-light mb-5">
                                                <div className="flex items-center gap-1.5">
                                                    <svg className="w-4 h-4 text-crimson" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                                    </svg>
                                                    <span>{formatDate(cls.date)}</span>
                                                </div>
                                                <div className="flex items-center gap-1.5">
                                                    <svg className="w-4 h-4 text-crimson" 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>
                                                    <span>{cls.time}</span>
                                                </div>
                                            </div>
                                            <button
                                                onClick={() => handleEnrollClick(cls)}
                                                className="w-full bg-charcoal text-white py-3 rounded-xl font-medium hover:bg-crimson transition-colors shadow-md hover:shadow-lg"
                                            >
                                                Join Class
                                            </button>
                                        </div>
                                    </>
                                ) : (
                                    <div className="h-full flex flex-col justify-center items-center p-8 text-white text-center">
                                        <div className="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center mb-6 animate-float">
                                            <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
                                            </svg>
                                        </div>
                                        <h3 className="font-serif font-bold text-2xl mb-3">
                                            {cls.title}
                                        </h3>
                                        <p className="mb-6 text-white/90">Start your artistic journey today with a special offer</p>
                                        <button
                                            onClick={() => handleEnrollClick(cls)}
                                            className="bg-white text-crimson px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors shadow-lg hover:shadow-xl"
                                        >
                                            Claim Offer
                                        </button>
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
}

window.UpcomingClasses = UpcomingClasses;