const { useState, useEffect } = React;

const ArrowRightIcon = ({ size }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg>
);

const SparklesIcon = ({ size, className }) => (
    <svg xmlns="http://www.w3.org/2000/svg" className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" /><path d="M20 3v4" /><path d="M22 5h-4" /><path d="M4 17v2" /><path d="M5 18H3" /></svg>
);

const Hero = () => {
    const [scrollY, setScrollY] = useState(0);

    useEffect(() => {
        const handleScroll = () => setScrollY(window.scrollY);
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    // Parallax calculations (simulating Framer's useTransform)
    const y1 = Math.min(scrollY * 0.2, 200);
    const y2 = Math.max(scrollY * -0.15, -150);
    const opacity = Math.max(1 - scrollY / 300, 0);

    return (
        <section className="relative min-h-screen flex items-center justify-center pt-20 overflow-hidden">
            {/* Dynamic Background Elements */}
            <div className="absolute inset-0 overflow-hidden pointer-events-none">
                <div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-emerald-500 rounded-full mix-blend-screen filter blur-[150px] opacity-20 animate-pulse-glow"></div>
                <div className="absolute bottom-1/4 right-1/4 w-[600px] h-[600px] bg-teal-400 rounded-full mix-blend-screen filter blur-[150px] opacity-20 animate-pulse-glow" style={{ animationDelay: '1s' }}></div>
            </div>

            <div className="max-w-7xl mx-auto px-6 relative z-10 w-full grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">

                {/* Left Copy */}
                <div className="fade-in-left block" style={{ opacity }}>
                    <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-panel mb-8 border-emerald-500/30 text-sm font-medium text-emerald-400">
                        <SparklesIcon size={16} className="text-teal-400" />
                        <span>The New Standard in Prediction Markets</span>
                    </div>

                    <h1 className="text-6xl md:text-8xl font-extrabold mb-8 tracking-tight leading-[1.05]">
                        Predict. <br />
                        Profit. <br />
                        <span className="text-gradient">Play on.</span>
                    </h1>

                    <p className="text-xl text-gray-400 mb-10 max-w-lg leading-relaxed">
                        Trade on the outcome of anything. Real-world events scaled with the speed and safety of the newly native <strong className="text-white">DoxaWallet</strong>, powered entirely by BRLC.
                    </p>

                    <div className="flex flex-col sm:flex-row gap-4">
                        <button className="px-8 py-4 rounded-2xl bg-gradient-to-r from-emerald-500 to-teal-400 font-bold text-lg shadow-[0_0_30px_rgba(16,185,129,0.3)] hover:scale-105 hover:shadow-[0_0_50px_rgba(16,185,129,0.5)] transition-all flex items-center justify-center gap-2 group">
                            Start Trading
                            <span className="group-hover:translate-x-1 transition-transform inline-block"><ArrowRightIcon size={20} /></span>
                        </button>
                        <button className="px-8 py-4 rounded-2xl glass-panel font-bold text-lg hover:bg-white/5 transition-all text-center">
                            Explore Markets
                        </button>
                    </div>
                </div>

                {/* Right Playful Interactive Elements */}
                <div className="relative h-[600px] hidden lg:block perspective-1000">
                    <div
                        style={{ transform: `translateY(${y1}px)` }}
                        className="absolute top-10 right-10 w-[280px] h-[340px] bg-[#0f172a] border border-white/5 rounded-2xl shadow-2xl rotate-12 hover:rotate-0 hover:z-20 transition-all duration-500 animate-float cursor-pointer flex flex-col justify-between p-4"
                    >
                        <div>
                            <div className="flex justify-between items-center mb-1">
                                <div className="text-[10px] text-slate-400 uppercase tracking-wider">BRASILEIRÃO</div>
                                <div className="text-[10px] text-slate-400 uppercase tracking-wider">#42</div>
                            </div>
                            <h3 className="text-base font-semibold text-white leading-snug mb-4">Flamengo vs Fluminense</h3>

                            <div className="flex flex-col gap-2">
                                <div className="flex justify-between items-center">
                                    <div className="flex items-center gap-2">
                                        <img src="https://upload.wikimedia.org/wikipedia/commons/2/2e/Flamengo_braz_logo.svg" className="w-5 h-5 object-contain" alt="Flamengo" />
                                        <span className="text-[13px] text-slate-200 font-medium">Flamengo</span>
                                    </div>
                                    <span className="text-[13px] text-slate-200 font-semibold">45%</span>
                                </div>
                                <div className="flex justify-between items-center">
                                    <div className="flex items-center gap-2">
                                        <img src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Fluminense_FC_escudo.png" className="w-5 h-5 object-contain" alt="Fluminense" />
                                        <span className="text-[13px] text-slate-200 font-medium">Fluminense</span>
                                    </div>
                                    <span className="text-[13px] text-slate-200 font-semibold">32%</span>
                                </div>
                                <div className="flex gap-1.5 mt-2">
                                    <button className="flex-1 py-2 rounded bg-emerald-500/15 text-emerald-400 text-[10px] font-bold uppercase border-none">FLA</button>
                                    <button className="flex-1 py-2 rounded bg-white/10 text-slate-400 text-[10px] font-bold uppercase border-none">DRAW</button>
                                    <button className="flex-1 py-2 rounded bg-teal-500/15 text-teal-400 text-[10px] font-bold uppercase border-none">FLU</button>
                                </div>
                            </div>
                        </div>

                        <div className="flex justify-between items-center text-[10px] text-slate-500 mt-4">
                            <div><span className="text-emerald-400 font-semibold">R$</span> 1.240.500 Liq.</div>
                            <div>Today • 16:00</div>
                        </div>
                    </div>

                    <div
                        style={{ transform: `translateY(${y2}px)`, animationDelay: '2s' }}
                        className="absolute bottom-20 left-10 w-72 h-44 glass-panel border-emerald-500/30 rounded-3xl p-6 shadow-2xl -rotate-6 hover:rotate-0 hover:z-20 transition-all duration-500 animate-float cursor-pointer"
                    >
                        <div className="w-full h-full rounded-xl bg-gradient-to-br from-[#0f172a] to-transparent flex flex-col justify-center">
                            <div className="flex items-center gap-4 mb-4">
                                <div className="w-12 h-12 rounded-full bg-gradient-to-tr from-teal-400 to-emerald-500 flex items-center justify-center shadow-lg">
                                    <span className="font-bold">DW</span>
                                </div>
                                <div>
                                    <div className="text-sm font-bold text-gray-400">DoxaWallet Balance</div>
                                    <div className="text-2xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-400">14.230,50 BRLC</div>
                                </div>
                            </div>
                            <div className="h-2 w-full bg-white/10 rounded-full overflow-hidden">
                                <div className="h-full w-3/4 bg-gradient-to-r from-emerald-500 to-teal-400"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};


window.Hero = Hero;

window.Hero = Hero;