"use client";

import React, { useState, useEffect, useRef, RefObject } from "react";
import {
    Rocket,
    Shield,
    Radar,
    Satellite,
    Cpu,
    Lock,
    ChevronRight,
    Menu,
    X,
    ArrowUpRight,
    Play,
    Target,
    Zap,
    CheckCircle,
    Globe,
    Briefcase,
    Users,
    Layers,
    Radio
} from "lucide-react";

// --- Hooks for Animation ---
const useOnScreen = (options: IntersectionObserverInit): [RefObject<HTMLDivElement | null>, boolean] => {
    const ref = useRef<HTMLDivElement>(null);
    const [visible, setVisible] = useState(false);

    useEffect(() => {
        const observer = new IntersectionObserver(([entry]) => {
            if (entry.isIntersecting) {
                setVisible(true);
                observer.disconnect();
            }
        }, options);

        if (ref.current) {
            observer.observe(ref.current);
        }

        return () => {
            observer.disconnect();
        };
    }, [options]);

    return [ref, visible];
};

// --- Components ---

const fadeOptions: IntersectionObserverInit = { threshold: 0.1 };

interface FadeInSectionProps {
    children: React.ReactNode;
    delay?: number;
    className?: string;
}

const FadeInSection = ({ children, delay = 0, className = "" }: FadeInSectionProps) => {
    const [ref, visible] = useOnScreen(fadeOptions);

    return (
        <div
            ref={ref}
            style={{ transitionDelay: `${delay}ms` }}
            className={`transition-all duration-1000 ease-out transform ${visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-12"
                } ${className}`}
        >
            {children}
        </div>
    );
};

export default function AerospaceDefensePage() {
    const [scrolled, setScrolled] = useState(false);
    const [menuOpen, setMenuOpen] = useState(false);

    useEffect(() => {
        const onScroll = () => setScrolled(window.scrollY > 20);
        window.addEventListener("scroll", onScroll);
        return () => window.removeEventListener("scroll", onScroll);
    }, []);

    return (
        <div className="min-h-screen bg-[#05070B] text-slate-200 font-sans overflow-x-hidden selection:bg-blue-500/30 selection:text-white">

            {/* Mobile Menu */}
            {menuOpen && (
                <div className="fixed inset-0 z-40 bg-[#05070B] pt-24 px-6 md:hidden border-b border-slate-800">
                    <nav className="flex flex-col gap-8 text-xl font-light text-slate-300">
                        {['Systems', 'Security', 'Innovation', 'Global'].map((item) => (
                            <a key={item} href="#" className="border-b border-slate-800 pb-4">{item}</a>
                        ))}
                    </nav>
                </div>
            )}

            {/* ================= HERO ================= */}
            <section className="relative min-h-screen flex items-end pb-32 pt-32 overflow-hidden">
                {/* Background Video/Image */}
                <div className="absolute inset-0 z-0">
                    <img
                        src="https://images.unsplash.com/photo-1517976487492-5750f3195933?q=80&w=2070&auto=format&fit=crop"
                        alt="Orbital Station"
                        className="w-full h-full object-cover"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-neutral-950 via-neutral-950/40 to-transparent"></div>
                    <div className="absolute inset-0 bg-neutral-950/20"></div>
                </div>

                <div className="max-w-[1400px] mx-auto px-6 relative z-10 w-full grid lg:grid-cols-12 gap-12 items-end">
                    <div className="lg:col-span-8">

                        <FadeInSection delay={100}>
                            <h1 className="text-6xl md:text-8xl lg:text-9xl font-black tracking-tighter text-white mb-8 leading-[0.9]">
                                SOVEREIGN <br />
                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-white via-neutral-400 to-neutral-600">
                                    DOMINANCE
                                </span>
                            </h1>
                        </FadeInSection>

                        <FadeInSection delay={200}>
                            <div className="flex flex-col md:flex-row gap-8 items-start md:items-center">
                                <p className="max-w-md text-lg text-neutral-300 leading-relaxed font-medium">
                                    We engineer the impossible. From hypersonic delivery to quantum-encrypted comms,
                                    we define the future of national security.
                                </p>
                                <div className="flex gap-4">
                                    <button className="h-14 w-14 rounded-full border border-white/30 flex items-center justify-center hover:bg-white hover:text-black transition-all duration-300 group">
                                        <ArrowUpRight className="w-6 h-6 transform group-hover:rotate-45 transition-transform" />
                                    </button>
                                    <button className="h-14 px-8 rounded-full bg-white text-black font-bold uppercase tracking-widest hover:bg-[#4a00e0] hover:text-white transition-all duration-300">
                                        Explore
                                    </button>
                                </div>
                            </div>
                        </FadeInSection>
                    </div>
                </div>
            </section>

            {/* ================= BENTO GRID CAPABILITIES ================= */}
            <section className="py-22 bg-white relative">
                <div className="max-w-[1400px] mx-auto px-6">
                    <div className="flex justify-between items-end mb-16 border-b border-neutral-200 pb-8">
                        <FadeInSection>
                            <h2 className="text-4xl font-bold text-neutral-900 tracking-tight">
                                Operational <span className="text-neutral-400">Sectors</span>
                            </h2>
                        </FadeInSection>
                    </div>

                    {/* BENTO GRID */}
                    <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 auto-rows-[300px]">

                        {/* Large Card 1 - Kept Dark for Contrast */}
                        <div className="md:col-span-2 lg:col-span-2 row-span-2 group relative overflow-hidden bg-neutral-900 border border-neutral-200">
                            <img src="https://images.unsplash.com/photo-1559627755-e87f62e8bce9?q=80&w=2670&auto=format&fit=crop" className="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:opacity-80 transition-opacity duration-700" />
                            <div className="absolute inset-0 bg-gradient-to-t"></div>
                            <div className="absolute bottom-0 left-0 p-8">
                                <div className="w-12 h-12 bg-[#4a00e0] text-white flex items-center justify-center mb-6">
                                    <Rocket className="w-6 h-6" />
                                </div>
                                <h3 className="text-3xl font-bold text-white mb-2 uppercase">Aerospace Systems</h3>
                                <p className="text-neutral-300 max-w-sm mb-6">Next-generation propulsion and hypersonics for absolute air superiority.</p>
                                <div className="flex items-center gap-2 text-[#4a00e0] font-bold uppercase tracking-widest text-xs">
                                    View Specs <ArrowUpRight className="w-4 h-4" />
                                </div>
                            </div>
                        </div>

                        {/* Tall Card - Kept Dark */}
                        <div className="md:col-span-1 lg:col-span-1 row-span-2 group relative overflow-hidden bg-neutral-900 border border-neutral-200">
                            <img src="https://images.unsplash.com/photo-1563986768609-322da13575f3?q=80&w=1470&auto=format&fit=crop" className="absolute inset-0 w-full h-full object-cover opacity-50 group-hover:opacity-70 transition-opacity duration-700" />
                            <div className="absolute inset-0 bg-gradient-to-b "></div>
                            <div className="absolute bottom-0 left-0 p-8 w-full">
                                <Lock className="w-8 h-8 text-white mb-4" />
                                <h3 className="text-2xl font-bold text-white mb-2 uppercase">Cyber Warfare</h3>
                                <p className="text-neutral-300 text-sm">Offensive & defensive digital operations.</p>
                            </div>
                        </div>

                        {/* Small Card 1 - Light Mode Style */}
                        <div className="group relative bg-neutral-50 border border-neutral-200 p-8 flex flex-col justify-between hover:bg-white hover:shadow-xl hover:border-orange-500/20 transition-all duration-300">
                            <div className="flex justify-between items-start">
                                <Radar className="w-8 h-8 text-neutral-400 group-hover:text-[#4a00e0] transition-colors" />
                                <ArrowUpRight className="w-5 h-5 text-neutral-300 group-hover:text-[#4a00e0] transition-colors" />
                            </div>
                            <div>
                                <h3 className="text-xl font-bold text-neutral-900 mb-1 uppercase">ISR Systems</h3>
                                <p className="text-xs text-neutral-500 font-mono font-bold">RADAR / LIDAR / SONAR</p>
                            </div>
                        </div>

                        {/* Small Card 2 - Light Mode Style */}
                        <div className="group relative bg-neutral-50 border border-neutral-200 p-8 flex flex-col justify-between hover:bg-white hover:shadow-xl hover:border-orange-500/20 transition-all duration-300">
                            <div className="flex justify-between items-start">
                                <Satellite className="w-8 h-8 text-neutral-400 group-hover:text-[#4a00e0] transition-colors" />
                                <ArrowUpRight className="w-5 h-5 text-neutral-300 group-hover:text-[#4a00e0] transition-colors" />
                            </div>
                            <div>
                                <h3 className="text-xl font-bold text-neutral-900 mb-1 uppercase">Orbital Ops</h3>
                                <p className="text-xs text-neutral-500 font-mono font-bold">SATCOM / DEEP SPACE</p>
                            </div>
                        </div>

                        {/* Wide Card - Kept Dark */}
                        <div className="md:col-span-2 lg:col-span-2 group relative overflow-hidden bg-neutral-900 border border-neutral-200">
                            <img src="https://images.unsplash.com/photo-1596328639534-1cb662580c0c?q=80&w=2670&auto=format&fit=crop" className="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:opacity-80 transition-opacity duration-700" />
                            <div className="absolute inset-0 bg-gradient-to-r from-black via-black/50 to-transparent"></div>
                            <div className="absolute inset-0 p-8 flex flex-col justify-center items-start">
                                <Shield className="w-10 h-10 text-[#4a00e0] mb-4" />
                                <h3 className="text-2xl font-bold text-white mb-2 uppercase">Land & Sea Defense</h3>
                                <p className="text-neutral-300 max-w-sm">Heavy armor, naval fleets, and kinetic interception systems.</p>
                            </div>
                        </div>

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

            {/* ================= CAPABILITIES ================= */}
            <section className="py-24 bg-[#05070B] relative">
                <div className="max-w-7xl mx-auto px-6">

                    {/* Section Header */}
                    <div className="flex flex-col md:flex-row justify-between items-end mb-16 border-b border-slate-800 pb-8">
                        <FadeInSection>
                            <h2 className="text-4xl font-bold text-white">
                                Core <span className="text-slate-500">Capabilities</span>
                            </h2>
                        </FadeInSection>
                    </div>

                    {/* Cards Grid */}
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                        {[
                            {
                                icon: Rocket,
                                title: "Aerospace Systems",
                                desc: "Advanced propulsion and structural engineering for next-gen flight.",
                                image: "https://images.unsplash.com/photo-1559627755-e87f62e8bce9?q=80&w=2670&auto=format&fit=crop",
                            },
                            {
                                icon: Shield,
                                title: "Defence Platforms",
                                desc: "Land, naval & air combat engineering solutions.",
                                image: "https://images.unsplash.com/photo-1596328639534-1cb662580c0c?q=80&w=2670&auto=format&fit=crop",
                            },
                            {
                                icon: Satellite,
                                title: "Space & Orbital Tech",
                                desc: "Satellites, ground stations, and deep-space missions.",
                                image: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop",
                            },
                            {
                                icon: Radar,
                                title: "Surveillance & ISR",
                                desc: "Radar, ISR, battlefield awareness systems.",
                                image: "https://images.unsplash.com/photo-1581092921461-eab62e97a78e?q=80&w=2670&auto=format&fit=crop",
                            },
                            {
                                icon: Cpu,
                                title: "AI & Autonomous",
                                desc: "AI-driven command, control & decision systems.",
                                image: "https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=2565&auto=format&fit=crop",
                            },
                            {
                                icon: Lock,
                                title: "Cyber & Secure Ops",
                                desc: "Defence-grade cybersecurity & encrypted networks.",
                                image: "https://images.unsplash.com/photo-1563986768609-322da13575f3?q=80&w=1470&auto=format&fit=crop",
                            },
                        ].map((item, i) => (
                            <FadeInSection key={i} delay={i * 60}>
                                <div className="group relative h-80 overflow-hidden rounded-sm border border-slate-800 bg-[#0A0D14] hover:border-slate-600 transition-all duration-500">

                                    {/* IMAGE — SLIDE UP FROM BOTTOM */}
                                    <div className="absolute inset-0 translate-y-full group-hover:translate-y-0 transition-transform duration-700 ease-out">
                                        <img
                                            src={item.image}
                                            alt={item.title}
                                            className="w-full h-full object-cover"
                                        />
                                        <div className="absolute inset-0 bg-gradient-to-t from-[#0A0D14]/40 via-[#0A0D14]/20 to-transparent" />


                                    </div>

                                    {/* CONTENT */}
                                    <div className="relative z-10 p-8 h-full flex flex-col justify-between">
                                        <div>
                                            <item.icon className="w-8 h-8 text-slate-400 group-hover:text-white transition-colors mb-6" />
                                            <h3 className="text-xl font-bold text-white mb-2">
                                                {item.title}
                                            </h3>
                                            <p className="text-slate-500 text-sm leading-relaxed group-hover:text-slate-300 transition-colors">
                                                {item.desc}
                                            </p>
                                        </div>

                                        {/* CTA */}
                                        <div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-blue-500 opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300">
                                            Learn More <ArrowUpRight className="w-3 h-3" />
                                        </div>
                                    </div>

                                </div>
                            </FadeInSection>
                        ))}
                    </div>
                </div>
            </section>

            {/* ================= PARALLAX MISSION SECTION ================= */}
            <section className="relative py-40 overflow-hidden flex items-center justify-center">
                {/* Parallax Background */}
                <div className="absolute inset-0 bg-fixed bg-cover bg-center grayscale"
                    style={{ backgroundImage: "url(https://images.unsplash.com/photo-1581092160562-40aa08e78837)" }}>
                </div>
                <div className="absolute inset-0 bg-[#05070B]/80"></div>

                <div className="relative max-w-5xl mx-auto px-6 text-center z-10">
                    <FadeInSection>
                        <div className="inline-block px-4 py-1 border border-white/20 rounded-full text-[10px] font-bold uppercase tracking-widest text-white mb-8 bg-white/5 backdrop-blur-sm">
                            Operational Excellence
                        </div>
                        <h2 className="text-4xl md:text-6xl font-bold text-white mb-8 leading-tight">
                            Mission-Critical. <br /><span className="text-slate-400">Zero-Failure.</span>
                        </h2>
                        <p className="text-xl text-slate-300 max-w-3xl mx-auto font-light leading-relaxed mb-12">
                            Designed for extreme environments, classified operations, and
                            uncompromising reliability across air, space, and defence theatres.
                        </p>

                        <div className="flex flex-wrap justify-center gap-4">
                            {["MIL-STD-810G", "High Reliability", "Secure by Design", "Long Lifecycle", "AS9100D Certified"].map((tag, i) => (
                                <div key={i} className="px-6 py-3 border border-white/10 bg-black/40 backdrop-blur-md rounded-sm text-sm text-slate-300 flex items-center gap-2 hover:border-white/40 transition-colors">
                                    <CheckCircle className="w-3 h-3 text-green-500" />
                                    {tag}
                                </div>
                            ))}
                        </div>
                    </FadeInSection>
                </div>
            </section>

            {/* ================= HIGH-IMPACT FEATURE ================= */}
            <section className="py-24 bg-[#ffffff] overflow-hidden">
                <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-16 items-center">
                    <FadeInSection>
                        <h2 className="text-6xl md:text-5xl font-bold text-black mb-6">
                            Autonomous <br /><span className="text-white-500">Domination</span>
                        </h2>
                        <p className="text-slate-900 text-lg mb-8 leading-relaxed border-l-2 border-slate-800 pl-6">
                            Our AI-driven platforms provide real-time battlefield analytics,
                            predictive maintenance, and autonomous swarm capabilities
                            that redefine modern warfare.
                        </p>
                        <ul className="space-y-4 mb-10">
                            {[
                                { title: "Swarm Intelligence", desc: "Coordinated drone operations." },
                                { title: "Predictive Logistics", desc: "AI supply chain optimization." },
                                { title: "Cognitive EW", desc: "Adaptive electronic warfare suite." }
                            ].map((feature, i) => (
                                <li key={i} className="flex gap-4 group">
                                    <div className="w-10 h-10 bg-slate-800 flex items-center justify-center text-white font-mono text-sm group-hover:bg-blue-600 transition-colors">
                                        0{i + 1}
                                    </div>
                                    <div>
                                        <h4 className="text-black font-bold uppercase text-sm mb-1">{feature.title}</h4>
                                        <p className="text-black text-sm">{feature.desc}</p>
                                    </div>
                                </li>
                            ))}
                        </ul>
                    </FadeInSection>

                    <FadeInSection delay={200}>
                        <div className="relative h-[500px] w-full group">
                            <div className="absolute inset-0 border border-slate-700 rounded-sm overflow-hidden">
                                <img
                                    src="https://images.unsplash.com/photo-1517976487492-5750f3195933?q=80&w=2070&auto=format&fit=crop"
                                    alt="Autonomous Drone"
                                    className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-1000"
                                />
                                <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
                            </div>

                            {/* HUD Element Overlay */}
                            <div className="absolute bottom-8 left-8 right-8">
                                <div className="flex justify-between items-end border-b border-white/20 pb-4 mb-4">
                                    <div>
                                        <div className="text-[10px] uppercase text-blue-400 font-bold tracking-widest mb-1">Target Tracking</div>
                                        <div className="text-2xl font-mono text-white">LOCKED</div>
                                    </div>
                                    <Target className="w-8 h-8 text-red-500 animate-pulse" />
                                </div>

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

            {/* ================= CTA ================= */}
            <section className="py-32 bg-[#080A10] text-center border-t border-slate-800">
                <div className="max-w-4xl mx-auto px-6">
                    <FadeInSection>
                        <div className="w-16 h-16 mx-auto bg-slate-800 rounded-full flex items-center justify-center mb-8">
                            <Globe className="w-8 h-8 text-white" />
                        </div>
                        <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
                            Ready to Secure the Future?
                        </h2>
                        <p className="text-lg text-slate-400 mb-10 max-w-2xl mx-auto">
                            Partner with us to build the next generation of aerospace and defence
                            systems for national and global security.
                        </p>

                        <div className="flex flex-col sm:flex-row justify-center gap-4">
                            <button className="px-10 py-5 bg-white text-black rounded-sm font-bold tracking-wide hover:bg-slate-200 transition shadow-lg">
                                Request Briefing
                            </button>
                            <button className="px-10 py-5 border border-slate-600 text-white rounded-sm font-bold tracking-wide hover:border-white hover:bg-white/5 transition flex items-center justify-center gap-2">
                                Contact Defence Team <ArrowUpRight className="w-4 h-4" />
                            </button>
                        </div>
                    </FadeInSection>
                </div>
            </section>

        </div>
    );
}