import React from 'react';
import {
    Rocket,
    ShieldCheck,
    Satellite,
    BrainCircuit,
    Users,
    Cpu,
    Zap,
    Globe,
    ArrowRight
} from 'lucide-react';

const SudarshanPage: React.FC = () => {
    return (
        <div className="min-h-screen bg-slate-950 text-slate-200 font-sans selection:bg-cyan-500 selection:text-white overflow-x-hidden">

            {/* Background Effects */}
            <div className="fixed inset-0 z-0 pointer-events-none">
                <div className="absolute top-[-10%] left-[-10%] w-96 h-96 bg-cyan-600/20 rounded-full blur-[128px]" />
                <div className="absolute bottom-[-10%] right-[-10%] w-96 h-96 bg-blue-600/20 rounded-full blur-[128px]" />
            </div>

            {/* Hero Section */}
            <header className="relative z-10 container mx-auto px-6 pt-20 pb-32 text-center">
                <div className="inline-block px-3 py-1 mb-6 border border-cyan-500/30 rounded-full bg-cyan-900/10 text-cyan-400 text-xs font-bold tracking-[0.2em] uppercase">
                    Upcoming Project
                </div>
                <h1 className="text-6xl md:text-8xl font-extrabold text-transparent bg-clip-text bg-gradient-to-b from-white to-slate-400 tracking-tight mb-6">
                    SUDARSHAN <br className="hidden md:block" />
                    <span className="text-4xl md:text-7xl font-light text-slate-500">PH01k2JW</span>
                </h1>
                <p className="text-xl md:text-2xl text-slate-400 max-w-3xl mx-auto mb-10 font-light leading-relaxed">
                    The Future of Intelligent Space Mobility. An evolving intelligent entity built for exploration, defense, and scientific discovery.
                </p>

                {/* Abstract Visual Representation of the Craft */}
                <div className="relative w-64 h-64 mx-auto mt-12 animate-pulse-slow">
                    <div className="absolute inset-0 border border-cyan-500/30 rounded-full animate-[spin_10s_linear_infinite]"></div>
                    <div className="absolute inset-4 border border-blue-500/30 rounded-full animate-[spin_15s_linear_infinite_reverse]"></div>
                    <div className="absolute inset-0 flex items-center justify-center">
                        <div className="w-32 h-32 bg-gradient-to-br from-cyan-500 to-blue-600 rounded-full blur-[50px] opacity-40"></div>
                    </div>
                </div>
            </header>

            {/* Introduction */}
            <section className="relative z-10 bg-slate-900/50 backdrop-blur-sm border-y border-slate-800">
                <div className="container mx-auto px-6 py-20 grid md:grid-cols-2 gap-16 items-center">
                    <div>
                        <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
                            A Fusion of Vedic Symbolism & <span className="text-cyan-400">Next-Gen Engineering</span>
                        </h2>
                        <p className="text-slate-400 mb-6 leading-relaxed">
                            Inspired by the legendary <strong>Sudarshan Chakra</strong>, this project blends ancient symbolism with cutting-edge engineering to create a craft capable of precision, power, and autonomous intelligence.
                        </p>
                        <p className="text-slate-400 leading-relaxed">
                            Sudarshan PH01k2JW is not just a machine; it is a space-air hybrid engineered to handle complex missions such as satellite deployment, atmospheric study, and high-level defense operations—all within a compact and futuristic circular design.
                        </p>
                    </div>
                    <div className="grid grid-cols-2 gap-4">
                        <StatCard label="Top Speed (Projected)" value="190" unit="km/sec" />
                        <StatCard label="AI Integration" value="Level 5" unit="Auto" />
                        <StatCard label="Satellites" value="05" unit="Capacity" />
                        <StatCard label="Passengers" value="02" unit="Crew" />
                    </div>
                </div>
            </section>

            {/* Multi-Role Features */}
            <section className="relative z-10 container mx-auto px-6 py-24">
                <div className="text-center mb-16">
                    <h2 className="text-3xl md:text-5xl font-bold text-white mb-4">Revolutionary Multi-Role System</h2>
                    <p className="text-slate-500">Engineered to perform multiple high-impact tasks simultaneously.</p>
                </div>

                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <FeatureCard
                        icon={<Globe className="w-8 h-8 text-cyan-400" />}
                        title="Space Exploration"
                        description="Designed to travel beyond Earth's atmosphere to study planets, collect soil samples via AI-arm, and provide real-time atmospheric data."
                    />
                    <FeatureCard
                        icon={<Satellite className="w-8 h-8 text-blue-400" />}
                        title="Satellite Deployment"
                        description="Specialized internal launch chamber capable of deploying up to five satellites for communication, disaster monitoring, and observation."
                    />
                    <FeatureCard
                        icon={<ShieldCheck className="w-8 h-8 text-red-400" />}
                        title="Defense & Strategy"
                        description="Multi-directional missile system with a 100km nuclear suppression field designed to neutralize threats within a specified radius."
                    />
                    <FeatureCard
                        icon={<BrainCircuit className="w-8 h-8 text-purple-400" />}
                        title="Autonomous Intelligence"
                        description="Powered by next-level AI, Sudarshan makes independent mission-critical decisions, from navigation to dynamic threat response."
                    />
                    <FeatureCard
                        icon={<Users className="w-8 h-8 text-emerald-400" />}
                        title="Passenger Capacity"
                        description="Supports two onboard passengers, marking a significant move toward the future of crewed micro-spacecraft missions."
                    />
                    <div className="bg-gradient-to-br from-slate-900 to-slate-800 p-8 rounded-2xl border border-slate-700 flex flex-col justify-center items-center text-center">
                        <h3 className="text-xl font-bold text-white mb-2">Engineering Vision</h3>
                        <div className="text-left w-full space-y-2 mt-4 text-sm font-mono text-slate-400">
                            <div className="flex justify-between border-b border-slate-700 pb-1"><span>Height</span> <span className="text-white">20 ft</span></div>
                            <div className="flex justify-between border-b border-slate-700 pb-1"><span>Width</span> <span className="text-white">27 ft</span></div>
                            <div className="flex justify-between border-b border-slate-700 pb-1"><span>Structure</span> <span className="text-white">Armored Shell</span></div>
                            <div className="flex justify-between"><span>Core</span> <span className="text-white">Modular AI</span></div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Roadmap / Prototype */}
            <section className="relative z-10 bg-black py-20 border-t border-slate-800">
                <div className="container mx-auto px-6 text-center">
                    <div className="max-w-4xl mx-auto">
                        <div className="flex justify-center mb-6">
                            <Cpu className="w-12 h-12 text-cyan-500" />
                        </div>
                        <h2 className="text-3xl font-bold text-white mb-6">Prototype Development & Launch</h2>
                        <p className="text-lg text-slate-400 mb-8">
                            Wimraw is currently in the R&D and simulation phase. The real working prototype is scheduled for unveiling soon at
                            <span className="text-white font-bold"> Wimraw Tower</span>.
                        </p>
                        <div className="p-6 bg-slate-900 rounded-xl border border-dashed border-slate-700 inline-block">
                            <p className="text-cyan-400 font-mono text-sm mb-2">STATUS: R&D / SIMULATION</p>
                            <div className="w-64 h-2 bg-slate-800 rounded-full overflow-hidden">
                                <div className="h-full bg-cyan-500 w-[65%] rounded-full animate-pulse"></div>
                            </div>
                        </div>

                    </div>
                </div>
            </section>

        </div>
    );
};

// Helper Components

const StatCard = ({ label, value, unit }: { label: string, value: string, unit: string }) => (
    <div className="bg-slate-800/50 border border-slate-700 p-4 rounded-xl backdrop-blur-sm">
        <div className="text-slate-400 text-xs uppercase tracking-wider mb-1">{label}</div>
        <div className="text-2xl font-bold text-white">
            {value} <span className="text-sm font-normal text-slate-500">{unit}</span>
        </div>
    </div>
);

const FeatureCard = ({ icon, title, description }: { icon: React.ReactNode, title: string, description: string }) => (
    <div className="group bg-slate-900/80 p-8 rounded-2xl border border-slate-800 hover:border-cyan-500/50 hover:bg-slate-800 transition-all duration-300">
        <div className="mb-6 p-3 bg-slate-800 rounded-lg inline-block group-hover:bg-slate-700 transition-colors">
            {icon}
        </div>
        <h3 className="text-xl font-bold text-white mb-3 group-hover:text-cyan-400 transition-colors">{title}</h3>
        <p className="text-slate-400 leading-relaxed text-sm">
            {description}
        </p>
    </div>
);

export default SudarshanPage;