// Hero.jsx - Enhanced Hero Section
const { useEffect, useState, useRef } = React;

// ThreeHero component
function ThreeHero() {
    const canvasRef = useRef(null);

    useEffect(() => {
        if (typeof THREE === 'undefined') {
            console.warn("Three.js is not loaded. 3D features will be disabled.");
            return;
        }
        if (!canvasRef.current) return;
        const canvas = canvasRef.current;
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
        renderer.setSize(canvas.clientWidth, canvas.clientHeight);

        // Subtle 3D wireframe torus
        const geometry = new THREE.TorusGeometry(3, 1, 16, 100);
        const material = new THREE.MeshBasicMaterial({ color: 0xC4553D, wireframe: true, transparent: true, opacity: 0.15 });
        const torusMesh = new THREE.Mesh(geometry, material);
        scene.add(torusMesh);

        // Subtle background charcoal dust particles
        const particlesGeometry = new THREE.BufferGeometry();
        const particlesCount = 2000;
        const posArray = new Float32Array(particlesCount * 3);
        for(let i = 0; i < particlesCount * 3; i++) {
            posArray[i] = (Math.random() - 0.5) * 15;
        }
        particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
        const particlesMaterial = new THREE.PointsMaterial({
            size: 0.02,
            color: 0x4A4844,
            transparent: true,
            opacity: 0.4
        });
        const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
        scene.add(particlesMesh);

        camera.position.z = 10;

        const animate = () => {
             requestAnimationFrame(animate);
             torusMesh.rotation.x += 0.005;
             torusMesh.rotation.y += 0.003;
             particlesMesh.rotation.y += 0.001;
             renderer.render(scene, camera);
        };
        animate();

        const handleResize = () => {
            camera.aspect = canvas.clientWidth / canvas.clientHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(canvas.clientWidth, canvas.clientHeight);
        };
        window.addEventListener('resize', handleResize);

        return () => {
             window.removeEventListener('resize', handleResize);
             renderer.dispose();
        };
    }, []);

    return <canvas ref={canvasRef} className="absolute inset-0 w-full h-full pointer-events-none -z-10"></canvas>;
}

function Hero({ onNavigate, onEnroll }) {
    const [drawProgress, setDrawProgress] = useState(0);
    const [isVisible, setIsVisible] = useState(false);

    useEffect(() => {
        setIsVisible(true);

        const duration = 8000;
        const startTime = Date.now();

        const animate = () => {
            const elapsed = Date.now() - startTime;
            const progress = Math.min(elapsed / duration, 1);
            setDrawProgress(progress);

            if (progress < 1) {
                requestAnimationFrame(animate);
            }
        };

        requestAnimationFrame(animate);
    }, []);

    const totalPathLength = 1000;

    return (
        <section className="relative min-h-screen flex items-center overflow-hidden bg-gradient-to-b from-cream via-cream to-white">
            <ThreeHero />
            {/* Background Pattern */}
            <div className="absolute inset-0 opacity-30">
                <div className="absolute top-20 left-10 w-64 h-64 bg-gold/10 rounded-full blur-3xl"></div>
                <div className="absolute bottom-20 right-10 w-96 h-96 bg-crimson/10 rounded-full blur-3xl"></div>
            </div>

            {/* Animated SVG Background */}
            <svg
                className="absolute inset-0 w-full h-full opacity-8 pointer-events-none"
                viewBox="0 0 1200 800"
                preserveAspectRatio="xMidYMid slice"
            >
                <g stroke="#C4553D" strokeWidth="2" fill="none">
                    <path
                        d="M-50,600 Q200,400 400,450 T800,300"
                        strokeDasharray={totalPathLength}
                        strokeDashoffset={totalPathLength * (1 - drawProgress)}
                        style={{ transition: 'stroke-dashoffset 0.1s' }}
                    />
                    <path
                        d="M150,520 Q180,480 200,520 Q220,560 180,560 Q140,560 150,520"
                        strokeDasharray={200}
                        strokeDashoffset={200 * (1 - Math.max(0, drawProgress - 0.1))}
                        style={{ transition: 'stroke-dashoffset 0.1s' }}
                    />
                    <path
                        d="M300,460 Q340,410 380,460 Q420,510 360,520 Q300,530 300,460"
                        strokeDasharray={200}
                        strokeDashoffset={200 * (1 - Math.max(0, drawProgress - 0.2))}
                        style={{ transition: 'stroke-dashoffset 0.1s' }}
                    />
                    <path
                        d="M500,420 Q550,360 600,420 Q650,480 570,500 Q490,520 500,420"
                        strokeDasharray={250}
                        strokeDashoffset={250 * (1 - Math.max(0, drawProgress - 0.3))}
                        style={{ transition: 'stroke-dashoffset 0.1s' }}
                    />
                    <path
                        d="M700,350 Q750,290 800,350 Q850,410 770,430 Q690,450 700,350"
                        strokeDasharray={250}
                        strokeDashoffset={250 * (1 - Math.max(0, drawProgress - 0.4))}
                        style={{ transition: 'stroke-dashoffset 0.1s' }}
                    />
                    <circle cx="180" cy="540" r="3" fill="#C4553D" opacity={Math.max(0, drawProgress - 0.5)} />
                    <circle cx="360" cy="480" r="3" fill="#C4553D" opacity={Math.max(0, drawProgress - 0.6)} />
                    <circle cx="570" cy="450" r="3" fill="#C4553D" opacity={Math.max(0, drawProgress - 0.65)} />
                    <circle cx="770" cy="380" r="3" fill="#C4553D" opacity={Math.max(0, drawProgress - 0.7)} />
                </g>
                <g stroke="#D4A574" strokeWidth="1.5" fill="none" opacity="0.5">
                    <path
                        d="M950,700 Q1000,600 1050,650 Q1100,700 1050,750 Q1000,800 950,750 Q900,700 950,700"
                        strokeDasharray={300}
                        strokeDashoffset={300 * (1 - Math.max(0, drawProgress - 0.3))}
                        style={{ transition: 'stroke-dashoffset 0.1s' }}
                    />
                </g>
            </svg>

            {/* Main Content */}
            <div className={`relative z-10 max-w-6xl mx-auto px-6 lg:px-12 text-center transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
                {/* Tagline */}
                <div className="inline-flex items-center gap-2 bg-white/70 backdrop-blur-sm px-5 py-2.5 rounded-full mb-8 shadow-sm border border-border-gray">
                    <span className="w-2 h-2 bg-crimson rounded-full animate-pulse"></span>
                    <span className="text-sm font-medium text-charcoal-light">Premium Online Art Education</span>
                </div>

                {/* Headline */}
                <h1 className="font-serif text-6xl md:text-7xl lg:text-8xl font-bold text-charcoal leading-[1.05] mb-6 drop-shadow-sm">
                    Where Art Meets
                    <span className="block gradient-text mt-2">Creativity</span>
                </h1>

                {/* Subheadline */}
                <p className="text-lg md:text-xl text-charcoal-light max-w-2xl mx-auto mb-10 leading-relaxed">
                    Master the art of drawing through personalized live classes with Arpita.
                    Join <span className="font-semibold text-crimson">2,500+ students</span> across
                    <span className="font-semibold text-crimson"> 45 countries</span> on their artistic journey.
                </p>

                {/* CTA Buttons */}
                <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16">
                    <button
                        onClick={() => onEnroll && onEnroll({ title: 'Arpita Art Academy - General Enrollment', description: 'Join our art community' })}
                        className="group relative px-8 py-4 bg-crimson text-white rounded-full font-semibold text-lg shadow-lg hover:shadow-xl hover-lift overflow-hidden"
                    >
                        <span className="relative z-10 flex items-center gap-2">
                            Start Learning
                            <svg className="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                            </svg>
                        </span>
                    </button>
                    <button
                        onClick={() => onNavigate && onNavigate('gallery')}
                        className="px-8 py-4 border-2 border-charcoal text-charcoal rounded-full font-semibold text-lg hover:bg-charcoal hover:text-white hover-lift"
                    >
                        View Gallery
                    </button>
                </div>

                {/* Stats Cards */}
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
                    {[
                        { number: '2,500+', label: 'Active Students' },
                        { number: '45', label: 'Countries' },
                        { number: '500+', label: 'Classes Completed' },
                        { number: '10,000+', label: 'Hours Taught' }
                    ].map((stat, index) => (
                        <div
                            key={index}
                            className="bg-white/70 backdrop-blur-sm rounded-2xl p-5 shadow-base hover:shadow-lg transition-all hover-lift"
                        >
                            <div className="text-3xl md:text-4xl font-serif font-bold text-crimson mb-1">
                                {stat.number}
                            </div>
                            <div className="text-sm text-charcoal-light font-medium">
                                {stat.label}
                            </div>
                        </div>
                    ))}
                </div>
            </div>

            {/* Scroll indicator */}
            <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
                <div className="w-6 h-10 rounded-full border-2 border-warm-gray flex items-start justify-center p-2">
                    <div className="w-1.5 h-3 bg-crimson rounded-full animate-pulse"></div>
                </div>
            </div>
        </section>
    );
}

window.Hero = Hero;