import { motion } from 'framer-motion';
import { Zap, ChevronRight, Terminal } from 'lucide-react';
import { CodeWindow } from './CodeWindow';

export const Hero = () => {
    return (
        <section className="relative pt-32 pb-20 overflow-hidden">
            {/* Background Grid Pattern */}
            <div
                className="absolute inset-0 z-0 opacity-10 pointer-events-none"
                style={{
                    backgroundImage: 'radial-gradient(#6366F1 0.5px, transparent 0.5px)',
                    backgroundSize: '24px 24px',
                }}
            />
            <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-indigo-500/10 blur-[120px] rounded-full -z-10" />
            <div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-amber-500/5 blur-[120px] rounded-full -z-10" />

            <div className="container mx-auto px-6 relative z-10">
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                    <motion.div
                        initial={{ opacity: 0, x: -50 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.8 }}
                    >
                        <div className="inline-flex items-center gap-2 bg-indigo-500/10 border border-indigo-500/20 px-3 py-1 rounded-full text-indigo-400 text-xs font-bold mb-6 tracking-wide uppercase">
                            <Zap size={14} /> Future-Proof Your Career
                        </div>
                        <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold font-heading leading-[1.1] mb-8 text-white">
                            Don't Fear the AI. <br />
                            <span className="text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-amber-600">
                                Build with AI.
                            </span>
                        </h1>
                        <p className="text-xl text-slate-400 mb-10 leading-relaxed max-w-xl font-sans">
                            The safe harbor for developers, students, and founders to stop watching tutorials and
                            start shipping. Master MCP, UCP, and Agents by building real products together.
                        </p>
                        <div className="flex flex-col sm:flex-row gap-4">
                            <button
                                onClick={() => {
                                    window.dispatchEvent(
                                        new CustomEvent('open-join-modal', {
                                            detail: { mode: 'opensource' },
                                        })
                                    );
                                }}
                                className="w-full sm:w-auto bg-amber-500 hover:bg-amber-400 text-slate-900 font-bold px-8 py-4 rounded-xl transition-all flex items-center justify-center gap-2 group cursor-pointer"
                            >
                                Join the Community
                            </button>
                            <button className="w-full sm:w-auto border border-slate-700 hover:border-slate-500 bg-white/5 px-8 py-4 rounded-xl font-bold transition-all text-white flex items-center justify-center gap-2 cursor-pointer">
                                Read Manifesto
                            </button>
                        </div>

                        <div className="mt-12 flex flex-col sm:flex-row items-start sm:items-center gap-6">
                            <div className="flex -space-x-3">
                                {[1, 2, 3, 4].map((i) => (
                                    <div
                                        key={i}
                                        className="w-10 h-10 rounded-full border-2 border-slate-900 bg-slate-700 flex items-center justify-center overflow-hidden"
                                    >
                                        <img
                                            src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${i + 123}`}
                                            alt="avatar"
                                            className="w-full h-full object-cover"
                                        />
                                    </div>
                                ))}
                                <div className="w-10 h-10 rounded-full border-2 border-slate-900 bg-indigo-600 flex items-center justify-center text-[10px] font-bold text-white">
                                    +
                                </div>
                            </div>
                            <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-0">
                                <p
                                    className="text-sm text-slate-500 flex items-center gap-2"
                                    style={{
                                        fontWeight: '400',
                                        fontStyle: 'normal',
                                        color: '#90a1b9',
                                    }}
                                >
                                    Join the Founding Class of 2026
                                </p>
                                <button
                                    onClick={() => {
                                        const buildSection = document.getElementById('build-season');
                                        buildSection?.scrollIntoView({
                                            behavior: 'smooth',
                                            block: 'center',
                                        });
                                    }}
                                    className="inline-flex items-center gap-1 px-3 py-1 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-500 text-xs font-bold hover:bg-amber-500/20 transition-all cursor-pointer sm:ml-2"
                                >
                                    Learn More <ChevronRight size={14} />
                                </button>
                            </div>
                        </div>
                    </motion.div>

                    <motion.div
                        initial={{ opacity: 0, scale: 0.9 }}
                        animate={{ opacity: 1, scale: 1 }}
                        transition={{ duration: 0.8, delay: 0.2 }}
                        className="relative mt-12 lg:mt-0"
                    >
                        <div className="relative z-10">
                            <CodeWindow />
                        </div>

                        {/* Decorative elements */}
                        <div className="absolute -top-12 -right-8 w-64 h-64 bg-indigo-500/20 rounded-full blur-[80px] -z-10" />
                        <div className="absolute -bottom-8 -left-12 w-48 h-48 bg-amber-500/10 rounded-full blur-[60px] -z-10" />

                        {/* Floating Badge */}
                        <motion.div
                            animate={{ y: [0, -10, 0] }}
                            transition={{ duration: 4, repeat: Infinity, ease: 'easeInOut' }}
                            className="absolute -bottom-6 right-10 z-20 bg-slate-800 border border-slate-700 p-4 rounded-xl shadow-2xl flex items-center gap-3"
                        >
                            <div className="p-2 bg-amber-500/10 text-amber-500 rounded-lg">
                                <Terminal size={20} />
                            </div>
                            <div>
                                <div className="text-[10px] text-slate-500 uppercase font-bold tracking-widest">
                                    Active Stack
                                </div>
                                <div className="text-sm font-bold text-white">Gemini 3 Pro + MCP</div>
                            </div>
                        </motion.div>
                    </motion.div>
                </div>
            </div>
        </section>
    );
};