"use client";

import React, { useState, useEffect, useRef, RefObject } from "react";
import {
    Globe,
    Wifi,
    Radio,
    Phone,
    ShieldCheck,
    Zap,
    Activity,
    Server,
    ArrowUpRight,
    Menu,
    X,
    ChevronRight,
    Users,
    Building2,
    Signal,
    Satellite,
    BarChart3,
    MapPin,
    Play
} 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 CommunicationsPage() {
    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-slate-50 text-slate-900 font-sans selection:bg-blue-700 selection:text-white overflow-x-hidden">

            {/* Mobile Menu */}
            {menuOpen && (
                <div className="fixed inset-0 z-40 bg-white pt-24 px-6 md:hidden border-b border-slate-200">
                    <nav className="flex flex-col gap-8 text-xl font-medium text-slate-900">
                        {['Network', 'Enterprise', 'Satellite', 'Investors', 'Insights'].map((item) => (
                            <a key={item} href="#" className="border-b border-slate-100 pb-4">{item}</a>
                        ))}
                    </nav>
                </div>
            )}

            {/* ================= HERO ================= */}
            <section className="relative min-h-[90vh] flex items-center pt-20 overflow-hidden bg-[#0A1628]">
                {/* Background Image */}
                <div className="absolute inset-0 z-0">
                    <img
                        src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop"
                        alt="Global Network Connectivity"
                        className="w-full h-full object-cover opacity-40"
                    />
                    <div className="absolute inset-0 bg-gradient-to-r from-[#0A1628] via-[#0A1628]/80 to-transparent"></div>
                    <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:60px_60px] opacity-20"></div>
                </div>

                <div className="max-w-[1400px] mx-auto px-6 relative z-10 w-full grid lg:grid-cols-12 gap-16 items-center">
                    <div className="lg:col-span-7">
                        <FadeInSection>
                            <div className="inline-flex items-center gap-3 px-4 py-2 bg-blue-900/30 border border-blue-500/30 text-blue-200 text-[10px] font-bold uppercase tracking-widest mb-8 backdrop-blur-md">
                                <div className="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></div>
                                Global Network Latency: 12ms
                            </div>
                        </FadeInSection>

                        <FadeInSection delay={100}>
                            <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold text-white mb-8 leading-[1.05] tracking-tight">
                                Connecting the <br />
                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-300">
                                    Enterprise World.
                                </span>
                            </h1>
                        </FadeInSection>

                        <FadeInSection delay={200}>
                            <p className="max-w-xl text-lg text-slate-300 leading-relaxed mb-12 border-l-2 border-blue-600 pl-6">
                                Horizon Comms delivers mission-critical connectivity, fiber-optic infrastructure,
                                and satellite uplinks to the world's largest organizations.
                            </p>
                            <div className="flex flex-col sm:flex-row gap-4">
                                <button className="h-14 px-8 bg-blue-600 text-white text-xs font-bold uppercase tracking-widest hover:bg-blue-500 transition-colors shadow-[0_0_30px_rgba(37,99,235,0.3)]">
                                    Explore Solutions
                                </button>
                                <button className="h-14 px-8 border border-white/20 bg-white/5 text-white text-xs font-bold uppercase tracking-widest hover:bg-white/10 transition-colors backdrop-blur-sm flex items-center gap-3">
                                    View Coverage Map <Globe className="w-4 h-4" />
                                </button>
                            </div>
                        </FadeInSection>
                    </div>

                    {/* Network Visualization Card */}
                    <div className="hidden lg:block lg:col-span-5 relative">
                        <FadeInSection delay={400}>
                            <div className="relative rounded-sm bg-[#0F1F38] border border-blue-500/20 shadow-2xl p-1 overflow-hidden">
                                <div className="absolute top-0 right-0 p-4 z-20">
                                    <Activity className="w-6 h-6 text-blue-400" />
                                </div>
                                <div className="relative h-[400px] w-full overflow-hidden bg-[#0A1628]">
                                    {/* Animated Map Grid Effect */}
                                    <div className="absolute inset-0 opacity-30">
                                        <div className="w-full h-full bg-[url('https://upload.wikimedia.org/wikipedia/commons/e/ec/World_map_blank_without_borders.svg')] bg-cover bg-center opacity-20"></div>
                                    </div>
                                    {/* Data Nodes */}
                                    <div className="absolute top-1/3 left-1/4 w-3 h-3 bg-blue-500 rounded-full shadow-[0_0_15px_#3b82f6] animate-pulse"></div>
                                    <div className="absolute top-1/2 left-1/2 w-3 h-3 bg-blue-500 rounded-full shadow-[0_0_15px_#3b82f6] animate-pulse" style={{ animationDelay: '1s' }}></div>
                                    <div className="absolute bottom-1/3 right-1/3 w-3 h-3 bg-blue-500 rounded-full shadow-[0_0_15px_#3b82f6] animate-pulse" style={{ animationDelay: '2s' }}></div>

                                    {/* Connecting Lines */}
                                    <svg className="absolute inset-0 w-full h-full pointer-events-none">
                                        <path d="M 200 150 Q 400 50 600 250" fill="none" stroke="rgba(59, 130, 246, 0.2)" strokeWidth="2" />
                                        <path d="M 200 150 Q 200 300 500 300" fill="none" stroke="rgba(59, 130, 246, 0.2)" strokeWidth="2" />
                                    </svg>

                                    <div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-[#0A1628] to-transparent">
                                        <div className="flex justify-between items-end">
                                            <div>
                                                <div className="text-xs text-blue-400 font-mono mb-1">Active Nodes</div>
                                                <div className="text-2xl font-bold text-white">42,891</div>
                                            </div>
                                            <div className="text-right">
                                                <div className="text-xs text-blue-400 font-mono mb-1">Throughput</div>
                                                <div className="text-2xl font-bold text-white">840 Tbps</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </FadeInSection>
                    </div>
                </div>
            </section>

            {/* ================= NETWORK STATUS TICKER ================= */}
            <div className="bg-white border-b border-slate-200 relative z-20">
                <div className="max-w-[1400px] mx-auto px-6 py-4 flex flex-col md:flex-row justify-between items-center text-xs font-bold uppercase tracking-widest text-slate-500">
                    <div className="flex gap-8 overflow-x-auto w-full md:w-auto items-center">
                        <span className="flex items-center gap-2"><div className="w-2 h-2 bg-green-500 rounded-full"></div> North America: Online</span>
                        <span className="flex items-center gap-2"><div className="w-2 h-2 bg-green-500 rounded-full"></div> EMEA: Online</span>
                        <span className="flex items-center gap-2"><div className="w-2 h-2 bg-green-500 rounded-full"></div> APAC: Online</span>
                        <span className="flex items-center gap-2"><div className="w-2 h-2 bg-amber-500 rounded-full"></div> LATAM: Maintenance</span>
                    </div>
                    <div className="hidden md:flex items-center gap-2 text-slate-400">
                        <Activity className="w-4 h-4" /> Live Network Status
                    </div>
                </div>
            </div>

            {/* ================= INFRASTRUCTURE (Bento) ================= */}
            <section className="py-32 bg-slate-50">
                <div className="max-w-[1400px] mx-auto px-6">
                    <div className="flex flex-col md:flex-row justify-between items-end mb-16 border-b border-slate-200 pb-8">
                        <FadeInSection>
                            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mb-4">
                                Our <span className="text-blue-700">Infrastructure</span>
                            </h2>
                            <div className="h-1 w-20 bg-blue-600"></div>
                        </FadeInSection>
                        <FadeInSection delay={100}>
                            <p className="text-slate-500 text-sm max-w-sm text-right mt-4 md:mt-0 leading-relaxed font-medium">
                                Providing the backbone for the digital economy with next-generation fiber and satellite arrays.
                            </p>
                        </FadeInSection>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">

                        {/* Main Card */}
                        <FadeInSection className="md:col-span-2">
                            <div className="group relative h-[500px] bg-white shadow-xl hover:shadow-2xl transition-all duration-500 overflow-hidden cursor-pointer">
                                <img
                                    src="https://images.unsplash.com/photo-1544197150-b99a580bb7a8?q=80&w=2670&auto=format&fit=crop"
                                    alt="Fiber Optics"
                                    className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                                />
                                <div className="absolute inset-0 bg-gradient-to-t from-slate-900/90 via-slate-900/40 to-transparent"></div>

                                <div className="absolute bottom-0 left-0 p-10">
                                    <div className="w-14 h-14 bg-blue-600 text-white flex items-center justify-center mb-6 shadow-lg">
                                        <Zap className="w-7 h-7" />
                                    </div>
                                    <h3 className="text-3xl font-bold text-white mb-3">Global Fiber Backbone</h3>
                                    <p className="text-slate-300 max-w-lg text-lg mb-8 leading-relaxed">
                                        Over 450,000 miles of proprietary fiber-optic cable connecting 600+ data centers worldwide.
                                    </p>
                                    <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-blue-400 group-hover:text-white transition-colors">
                                        View Network Map <ArrowUpRight className="w-4 h-4" />
                                    </div>
                                </div>
                            </div>
                        </FadeInSection>

                        {/* Tall Card */}
                        <FadeInSection className="md:col-span-1">
                            <div className="group relative h-[500px] bg-slate-900 shadow-xl overflow-hidden cursor-pointer">
                                <img
                                    src="https://images.unsplash.com/photo-1516849841032-87cbac4d88f7?q=80&w=2070&auto=format&fit=crop"
                                    alt="Satellite Link"
                                    className="absolute inset-0 w-full h-full object-cover opacity-60 transition-transform duration-700 group-hover:scale-105"
                                />
                                <div className="absolute inset-0 bg-gradient-to-b from-transparent to-slate-900/90"></div>
                                <div className="absolute inset-0 p-10 flex flex-col justify-end">
                                    <div className="w-12 h-12 border border-white/20 bg-white/10 backdrop-blur flex items-center justify-center mb-6 text-white">
                                        <Satellite className="w-6 h-6" />
                                    </div>
                                    <h3 className="text-2xl font-bold text-white mb-2">Low-Earth Orbit</h3>
                                    <p className="text-slate-300 text-sm mb-6 leading-relaxed">
                                        Constellation of 2,000+ satellites providing coverage to remote enterprise locations.
                                    </p>
                                    <div className="w-full bg-white/10 h-1 mt-auto">
                                        <div className="w-3/4 h-full bg-blue-500"></div>
                                    </div>
                                    <div className="flex justify-between text-[10px] uppercase tracking-widest text-slate-400 mt-2">
                                        <span>Coverage</span>
                                        <span className="text-white">Global</span>
                                    </div>
                                </div>
                            </div>
                        </FadeInSection>

                        {/* Small Cards */}
                        {[
                            { title: "5G Enterprise", desc: "Private cellular networks.", icon: Signal },
                            { title: "Cyber Defense", desc: "DDoS mitigation layer.", icon: ShieldCheck },
                            { title: "Data Centers", desc: "Tier 4 colocation facilities.", icon: Server }
                        ].map((item, i) => (
                            <FadeInSection key={i} delay={i * 100}>
                                <div className="bg-white p-8 shadow-md border-b-4 border-transparent hover:border-blue-600 hover:shadow-xl transition-all duration-300 h-full flex flex-col justify-between group">
                                    <div>
                                        <div className="w-12 h-12 bg-slate-100 rounded-sm flex items-center justify-center mb-6 text-slate-900 group-hover:bg-blue-600 group-hover:text-white transition-colors">
                                            <item.icon className="w-6 h-6" />
                                        </div>
                                        <h3 className="text-xl font-bold text-slate-900 mb-2">{item.title}</h3>
                                        <p className="text-slate-500 text-sm leading-relaxed">{item.desc}</p>
                                    </div>
                                    <div className="mt-6 flex items-center justify-end">
                                        <ChevronRight className="w-5 h-5 text-slate-300 group-hover:text-blue-600 transition-colors" />
                                    </div>
                                </div>
                            </FadeInSection>
                        ))}

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

            {/* ================= INVESTOR / STATS ================= */}
            <section className="py-32 bg-[#0A1628] text-white relative overflow-hidden">
                {/* Abstract Lines */}
                <div className="absolute inset-0 opacity-10">
                    <div className="absolute top-0 left-0 w-full h-full bg-[linear-gradient(45deg,transparent_25%,white_25%,white_50%,transparent_50%,transparent_75%,white_75%,white_100%)] bg-[size:40px_40px]"></div>
                </div>

                <div className="max-w-[1400px] mx-auto px-6 relative z-10 grid lg:grid-cols-2 gap-20 items-center">
                    <FadeInSection>
                        <div className="flex items-center gap-3 mb-6">
                            <BarChart3 className="w-6 h-6 text-blue-400" />
                            <span className="font-bold uppercase tracking-widest text-sm text-blue-200">Market Performance</span>
                        </div>
                        <h2 className="text-4xl md:text-5xl font-bold mb-8 leading-tight">
                            Reliability at <br /> <span className="text-blue-500">Institutional Scale.</span>
                        </h2>
                        <p className="text-slate-300 text-xl leading-relaxed mb-12 font-light">
                            Trusted by 85% of the Fortune 500. We maintain the highest standards of uptime, security, and financial stability in the industry.
                        </p>

                        <div className="grid grid-cols-2 gap-x-12 gap-y-8">
                            {[
                                { label: "Annual Revenue", val: "$24.8B" },
                                { label: "Client Retention", val: "98.4%" },
                                { label: "Points of Presence", val: "450+" },
                                { label: "R&D Investment", val: "$3.2B" }
                            ].map((stat, i) => (
                                <div key={i} className="border-t border-blue-800 pt-4">
                                    <div className="text-3xl font-bold text-white mb-1">{stat.val}</div>
                                    <div className="text-xs uppercase tracking-widest text-blue-300">{stat.label}</div>
                                </div>
                            ))}
                        </div>
                    </FadeInSection>

                    <FadeInSection delay={200}>
                        <div className="bg-white text-slate-900 p-10 shadow-2xl relative">
                            <div className="absolute top-0 right-0 p-4 bg-blue-600 text-white font-bold text-xs uppercase tracking-widest">
                                Case Study
                            </div>
                            <div className="w-16 h-16 bg-slate-100 flex items-center justify-center mb-8">
                                <Building2 className="w-8 h-8 text-slate-900" />
                            </div>
                            <h3 className="text-2xl font-bold mb-4">Global Bank Transformation</h3>
                            <p className="text-slate-600 mb-8 leading-relaxed">
                                "Horizon Comms enabled us to unify our trading floors across London, New York, and Tokyo with sub-millisecond latency, revolutionizing our arbitrage capabilities."
                            </p>
                            <div className="flex items-center gap-4">
                                <div className="w-10 h-10 bg-slate-200 rounded-full"></div>
                                <div>
                                    <div className="font-bold text-sm">Sarah Jenkins</div>
                                    <div className="text-xs text-slate-500 uppercase tracking-wide">CTO, Apex Financial</div>
                                </div>
                            </div>
                        </div>
                    </FadeInSection>
                </div>
            </section>

            {/* ================= SECURITY ================= */}
            <section className="py-24 bg-gradient-to-r from-slate-950 to-slate-900 text-white relative overflow-hidden">
                <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(59,130,246,0.15),transparent_60%)]"></div>

                <div className="max-w-[1400px] mx-auto px-6 relative z-10">
                    <FadeInSection>
                        <h3 className="text-sm uppercase tracking-widest text-blue-400 mb-6">
                            Security & Compliance
                        </h3>
                    </FadeInSection>

                    <div className="flex flex-wrap gap-6">
                        {["ISO 27001", "SOC 2", "GDPR", "HIPAA", "Zero Trust Architecture"].map((cert, i) => (
                            <FadeInSection key={i} delay={i * 80}>
                                <div className="px-6 py-3 rounded-full bg-white/5 border border-white/10 backdrop-blur-md text-sm font-semibold tracking-wide hover:bg-white/10 transition">
                                    ✔ {cert}
                                </div>
                            </FadeInSection>
                        ))}
                    </div>
                </div>
            </section>

            {/* ================= GLOBAL EXPANSION ================= */}
            <section className="py-32 bg-white">
                <div className="max-w-[1400px] mx-auto px-6">
                    <FadeInSection>
                        <h2 className="text-4xl md:text-5xl font-bold mb-20">
                            Global Expansion <span className="text-blue-600">Timeline</span>
                        </h2>
                    </FadeInSection>

                    <div className="relative border-l-4 border-blue-600 pl-12 space-y-12">
                        {[
                            { year: "2012", text: "North America backbone launch" },
                            { year: "2015", text: "Europe & Asia fiber expansion" },
                            { year: "2019", text: "Global satellite deployment" },
                            { year: "2024", text: "AI-powered autonomous routing" },
                        ].map((item, i) => (
                            <FadeInSection key={i} delay={i * 100}>
                                <div className="relative">
                                    <div className="absolute -left-[52px] top-1 w-5 h-5 rounded-full bg-blue-600 shadow-[0_0_20px_rgba(37,99,235,0.6)]"></div>
                                    <div className="flex items-center gap-6">
                                        <span className="text-blue-600 font-bold text-xl w-16">{item.year}</span>
                                        <p className="text-slate-700 text-lg font-medium">{item.text}</p>
                                    </div>
                                </div>
                            </FadeInSection>
                        ))}
                    </div>
                </div>
            </section>

            {/* ================= TECHNOLOGY ================= */}
            <section className="py-32 bg-[#0A1628] text-white">
                <div className="max-w-[1400px] mx-auto px-6">
                    <FadeInSection>
                        <h2 className="text-4xl md:text-5xl font-bold mb-20">
                            Built on <span className="text-blue-400">Advanced Technology</span>
                        </h2>
                    </FadeInSection>

                    <div className="grid md:grid-cols-4 gap-10">
                        {[
                            { icon: Server, label: "Tier IV Data Centers" },
                            { icon: Activity, label: "AI Network Monitoring" },
                            { icon: Signal, label: "5G & Edge Networks" },
                            { icon: Satellite, label: "LEO Satellite Mesh" },
                        ].map((t, i) => (
                            <FadeInSection key={i} delay={i * 100}>
                                <div className="group p-10 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-xl hover:bg-white/10 transition-all">
                                    <t.icon className="w-10 h-10 text-blue-400 mb-6 group-hover:scale-110 transition-transform" />
                                    <div className="text-lg font-semibold tracking-wide">{t.label}</div>
                                </div>
                            </FadeInSection>
                        ))}
                    </div>
                </div>
            </section>

            {/* ================= USE CASES ================= */}
            <section className="py-32 bg-slate-100">
                <div className="max-w-[1400px] mx-auto px-6">
                    <FadeInSection>
                        <h2 className="text-4xl md:text-5xl font-bold mb-20">
                            Industry <span className="text-blue-600">Solutions</span>
                        </h2>
                    </FadeInSection>

                    <div className="grid lg:grid-cols-4 gap-10">
                        {[
                            { title: "Banking & Trading", desc: "Sub-millisecond trading connectivity." },
                            { title: "Government", desc: "Secure national communication grids." },
                            { title: "Telecom Operators", desc: "Carrier-grade backhaul & interconnect." },
                            { title: "Energy & Utilities", desc: "Resilient monitoring infrastructure." },
                        ].map((u, i) => (
                            <FadeInSection key={i} delay={i * 80}>
                                <div className="bg-white p-10 border border-slate-200 hover:border-blue-600 hover:shadow-2xl transition-all">
                                    <h3 className="font-bold text-xl mb-3">{u.title}</h3>
                                    <p className="text-slate-600 text-sm leading-relaxed">{u.desc}</p>
                                </div>
                            </FadeInSection>
                        ))}
                    </div>
                </div>
            </section>

            {/* ================= SERVICES ================= */}
            <section className="py-32 bg-white">
                <div className="max-w-[1400px] mx-auto px-6">
                    <FadeInSection>
                        <h2 className="text-4xl md:text-5xl font-bold mb-6">
                            Enterprise Communication <span className="text-blue-600">Services</span>
                        </h2>
                        <p className="text-slate-500 max-w-2xl mb-20 text-lg">
                            Designed for hyperscale enterprises, governments, and financial institutions.
                        </p>
                    </FadeInSection>

                    <div className="grid md:grid-cols-3 gap-12">
                        {[
                            { icon: Wifi, title: "Fiber Connectivity", desc: "Ultra-low latency global fiber routes." },
                            { icon: Satellite, title: "Satellite Uplinks", desc: "LEO & GEO redundancy architecture." },
                            { icon: ShieldCheck, title: "Secure Networks", desc: "Zero-trust, encrypted infrastructure." },
                        ].map((s, i) => (
                            <FadeInSection key={i} delay={i * 100}>
                                <div className="group p-12 border border-slate-200 hover:border-blue-600 hover:shadow-2xl transition-all bg-white">
                                    <div className="w-16 h-16 bg-blue-600 text-white flex items-center justify-center mb-8 shadow-lg">
                                        <s.icon className="w-8 h-8" />
                                    </div>
                                    <h3 className="text-2xl font-bold mb-4">{s.title}</h3>
                                    <p className="text-slate-600 leading-relaxed">{s.desc}</p>
                                </div>
                            </FadeInSection>
                        ))}
                    </div>
                </div>
            </section>

        </div>
    );
}