"use client";

import React, { useState, useEffect, useRef, RefObject } from "react";
import {
    Server,
    Shield,
    Zap,
    Globe,
    Code,
    ArrowUpRight,
    CheckCircle,
    Menu,
    X,
    ChevronRight,
    Activity,
    Layers,
    Cpu,
    Lock,
    BarChart,
    Terminal,
    Play,
    Users,
    Command,
    Database,
    Cloud,
    Sparkles,
    GitBranch,
    Box,
    Fingerprint
} 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 cubic-bezier(0.16, 1, 0.3, 1) transform ${visible ? "opacity-100 translate-y-0 scale-100" : "opacity-0 translate-y-12 scale-95"
                } ${className}`}
        >
            {children}
        </div>
    );
};

export default function SoftwarePage() {
    const [scrolled, setScrolled] = useState(false);
    const [menuOpen, setMenuOpen] = useState(false);
    const [videoOpen, setVideoOpen] = 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-[#0B0E14] text-slate-300 font-sans selection:bg-indigo-500/30 selection:text-white overflow-x-hidden">

            {/* --- Global Styles & Animations --- */}
            <style jsx global>{`
        @keyframes blob {
          0% { transform: translate(0px, 0px) scale(1); }
          33% { transform: translate(30px, -50px) scale(1.1); }
          66% { transform: translate(-20px, 20px) scale(0.9); }
          100% { transform: translate(0px, 0px) scale(1); }
        }
        .animate-blob {
          animation: blob 10s infinite;
        }
        .animation-delay-2000 {
          animation-delay: 2s;
        }
        .animation-delay-4000 {
          animation-delay: 4s;
        }
        .glass-panel {
          background: rgba(255, 255, 255, 0.03);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          border: 1px solid rgba(255, 255, 255, 0.08);
        }
        .text-gradient {
          background: linear-gradient(to right bottom, #ffffff, #94a3b8);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .hero-perspective {
          perspective: 1000px;
        }
        .hero-rotate {
          transform: rotateX(12deg) scale(0.9);
          transition: transform 0.5s ease-out;
        }
        .group:hover .hero-rotate {
          transform: rotateX(0deg) scale(1);
        }
      `}</style>

            {/* --- Ambient Background --- */}
            <div className="fixed inset-0 z-0 overflow-hidden pointer-events-none">
                <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-purple-500/20 rounded-full mix-blend-screen filter blur-[100px] opacity-30 animate-blob"></div>
                <div className="absolute top-0 right-1/4 w-[500px] h-[500px] bg-blue-500/20 rounded-full mix-blend-screen filter blur-[100px] opacity-30 animate-blob animation-delay-2000"></div>
                <div className="absolute -bottom-32 left-1/2 -translate-x-1/2 w-[800px] h-[800px] bg-indigo-500/10 rounded-full mix-blend-screen filter blur-[120px] opacity-30 animate-blob animation-delay-4000"></div>
                <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 brightness-100 contrast-150"></div>
            </div>

            {/* Mobile Menu */}
            {menuOpen && (
                <div className="fixed inset-0 z-40 bg-[#0B0E14] pt-24 px-6 md:hidden">
                    <nav className="flex flex-col gap-8 text-2xl font-medium text-white">
                        {['Platform', 'Solutions', 'Developers', 'Pricing'].map((item) => (
                            <a key={item} href="#" className="border-b border-white/10 pb-4">{item}</a>
                        ))}
                    </nav>
                </div>
            )}

            {/* ================= HERO ================= */}
            <section className="relative pt-12 pb-20 lg:pt-28 lg:pb-12">
                <div className="max-w-[1400px] mx-auto px-6 relative z-10">
                    <div className="text-center max-w-4xl mx-auto mb-20">
                      
                        <FadeInSection delay={100}>
                            <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold text-white mb-8 tracking-tight leading-[1.1]">
                                Scale Your Vision <br />
                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-400 animate-pulse">
                                    Without Limits.
                                </span>
                            </h1>
                        </FadeInSection>

                        <FadeInSection delay={200}>
                            <p className="max-w-2xl mx-auto text-xl text-slate-400 leading-relaxed mb-10">
                                A unified operating system for modern business. Orchestrate data,
                                automate workflows, and secure your infrastructure with AI-driven insights.
                            </p>
                        </FadeInSection>

                        <FadeInSection delay={300}>
                            <div className="flex flex-col sm:flex-row justify-center gap-4">
                                <button className="h-14 px-8 rounded-full bg-white text-[#0B0E14] font-bold hover:scale-105 transition-all duration-300 flex items-center justify-center gap-2 group shadow-[0_0_40px_-10px_rgba(255,255,255,0.4)]">
                                    Deploy Now <ArrowUpRight className="w-4 h-4 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" />
                                </button>
                                <button
                                    onClick={() => setVideoOpen(true)}
                                    className="h-14 px-8 rounded-full glass-panel text-white font-bold hover:bg-white/10 transition-all flex items-center justify-center gap-2"
                                >
                                    <Play className="w-4 h-4 fill-white" /> Watch Keynote
                                </button>
                            </div>
                        </FadeInSection>
                    </div>

                    {/* 3D Dashboard Mockup */}
                    <FadeInSection delay={400} className="hero-perspective group">
                        <div className="hero-rotate rounded-xl border border-white/10 shadow-2xl bg-[#0F1119]/80 backdrop-blur-xl overflow-hidden aspect-[16/9] md:aspect-[21/9] relative">
                            {/* Glowing Top Border */}
                            <div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-blue-500 to-transparent opacity-50"></div>

                            {/* Dashboard Content */}
                            <div className="absolute inset-0 flex">
                                {/* Sidebar */}
                                <div className="w-64 border-r border-white/5 p-6 hidden md:block">
                                    <div className="flex items-center gap-2 mb-8 opacity-50">
                                        <div className="w-3 h-3 rounded-full bg-white/20"></div>
                                        <div className="w-20 h-2 rounded-full bg-white/20"></div>
                                    </div>
                                    <div className="space-y-4">
                                        {[1, 2, 3, 4, 5].map((i) => (
                                            <div key={i} className="flex items-center gap-3 opacity-30">
                                                <div className="w-4 h-4 rounded bg-white/20"></div>
                                                <div className="w-full h-2 rounded bg-white/10"></div>
                                            </div>
                                        ))}
                                    </div>
                                </div>

                                {/* Main View */}
                                <div className="flex-1 p-8 relative">
                                    {/* Header */}
                                    <div className="flex justify-between items-center mb-8">
                                        <div>
                                            <div className="w-32 h-3 rounded bg-white/20 mb-2"></div>
                                            <div className="w-48 h-2 rounded bg-white/10"></div>
                                        </div>
                                        <div className="flex gap-2">
                                            <div className="w-8 h-8 rounded-full bg-white/10"></div>
                                            <div className="w-24 h-8 rounded bg-blue-600/20 border border-blue-500/30"></div>
                                        </div>
                                    </div>

                                    {/* Chart Area */}
                                    <div className="w-full h-64 rounded-lg bg-gradient-to-b from-blue-500/5 to-transparent border border-white/5 relative overflow-hidden">
                                        {/* Grid Lines */}
                                        <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:40px_40px]"></div>

                                        {/* Data Line (Fake) */}
                                        <div className="absolute bottom-0 left-0 right-0 h-32 flex items-end justify-between px-2">
                                            {[20, 45, 30, 60, 45, 80, 55, 90, 70, 85, 60, 95].map((h, i) => (
                                                <div key={i} style={{ height: `${h}%` }} className="w-[6%] bg-blue-500/40 rounded-t-sm backdrop-blur-sm"></div>
                                            ))}
                                        </div>
                                    </div>

                                    {/* Stats Row */}
                                    <div className="grid grid-cols-3 gap-6 mt-8">
                                        {[1, 2, 3].map((i) => (
                                            <div key={i} className="h-24 rounded-lg bg-white/5 border border-white/5 p-4">
                                                <div className="w-8 h-8 rounded bg-white/10 mb-3"></div>
                                                <div className="w-16 h-2 rounded bg-white/20 mb-1"></div>
                                                <div className="w-10 h-2 rounded bg-white/10"></div>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </div>

                            {/* Glass Reflection */}
                            <div className="absolute inset-0 bg-gradient-to-tr from-white/5 to-transparent pointer-events-none"></div>
                        </div>
                    </FadeInSection>
                </div>
            </section>

            {/* ================= CLIENTS TICKER ================= */}
            <section className="py-10 border-y border-white/5 bg-[#0B0E14]">
                <div className="max-w-[1400px] mx-auto px-6 overflow-hidden">
                    <div className="flex items-center justify-between text-slate-500 text-sm font-bold uppercase tracking-widest">
                        <span>Used by teams at</span>
                        <div className="flex gap-12 opacity-50 grayscale hover:grayscale-0 transition-all duration-500">
                            {['Vertex', 'Linear', 'Acme Corp', 'GlobalBank', 'Nebula'].map((logo, i) => (
                                <div key={i} className="flex items-center gap-2">
                                    <div className="w-2 h-2 bg-slate-500 rounded-full"></div> {logo}
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </section>

            {/* ================= FEATURES (Bento Grid) ================= */}
            <section className="py-32 relative">
                <div className="max-w-[1400px] mx-auto px-6">
                    <div className="mb-20">
                        <FadeInSection>
                            <h2 className="text-4xl md:text-6xl font-bold text-white mb-6">
                                A Unified <span className="text-indigo-500">Ecosystem.</span>
                            </h2>
                            <p className="text-slate-400 text-lg max-w-2xl">
                                Everything you need to build, deploy, and scale. Integrated into one seamless platform.
                            </p>
                        </FadeInSection>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 auto-rows-[350px]">

                        {/* Feature 1: Global Edge */}
                        <FadeInSection className="md:col-span-2 row-span-1">
                            <div className="group h-full glass-panel rounded-3xl p-10 hover:border-indigo-500/50 transition-all duration-500 relative overflow-hidden flex flex-col justify-between">
                                <div className="absolute inset-0 bg-gradient-to-br from-indigo-600/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
                                <div className="relative z-10">
                                    <div className="w-12 h-12 bg-white/5 rounded-xl flex items-center justify-center mb-6 border border-white/10 text-indigo-400 shadow-inner">
                                        <Globe className="w-6 h-6" />
                                    </div>
                                    <h3 className="text-2xl font-bold text-white mb-3">Global Edge Network</h3>
                                    <p className="text-slate-400 max-w-md text-lg">
                                        Deploy instantly to 35+ regions. Our intelligent routing mesh ensures single-digit latency worldwide.
                                    </p>
                                </div>
                                {/* Map Visual (Abstract) */}
                                <div className="absolute right-0 bottom-0 w-1/2 h-full 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-no-repeat bg-cover bg-right-bottom mix-blend-overlay"></div>
                                </div>
                            </div>
                        </FadeInSection>

                        {/* Feature 2: Database */}
                        <FadeInSection className="md:col-span-1 row-span-1">
                            <div className="group h-full glass-panel rounded-3xl p-8 hover:border-purple-500/50 transition-all duration-500 relative overflow-hidden">
                                <div className="absolute bottom-0 right-0 w-[200px] h-[200px] bg-purple-600/20 rounded-full blur-[80px]"></div>
                                <div className="relative z-10 h-full flex flex-col justify-between">
                                    <div>
                                        <div className="w-12 h-12 bg-white/5 rounded-xl flex items-center justify-center mb-6 border border-white/10 text-purple-400">
                                            <Database className="w-6 h-6" />
                                        </div>
                                        <h3 className="text-xl font-bold text-white mb-2">Serverless Data</h3>
                                        <p className="text-slate-400 text-sm">
                                            Infinite scaling storage with automatic replication and branching.
                                        </p>
                                    </div>
                                    <div className="flex gap-2 mt-4">
                                        <span className="px-2 py-1 rounded bg-white/5 text-[10px] text-purple-300 border border-white/5">Redis</span>
                                        <span className="px-2 py-1 rounded bg-white/5 text-[10px] text-purple-300 border border-white/5">Postgres</span>
                                    </div>
                                </div>
                            </div>
                        </FadeInSection>

                        {/* Feature 3: Security */}
                        <FadeInSection className="md:col-span-1 row-span-1">
                            <div className="group h-full glass-panel rounded-3xl p-8 hover:border-emerald-500/50 transition-all duration-500 relative overflow-hidden">
                                <div className="absolute top-0 left-0 w-[200px] h-[200px] bg-emerald-600/10 rounded-full blur-[60px]"></div>
                                <div className="relative z-10 h-full flex flex-col justify-between">
                                    <div>
                                        <div className="w-12 h-12 bg-white/5 rounded-xl flex items-center justify-center mb-6 border border-white/10 text-emerald-400">
                                            <Shield className="w-6 h-6" />
                                        </div>
                                        <h3 className="text-xl font-bold text-white mb-2">Enterprise Security</h3>
                                        <p className="text-slate-400 text-sm">
                                            Zero-trust architecture with automated compliance scanning.
                                        </p>
                                    </div>
                                    <div className="space-y-2 mt-4">
                                        <div className="flex items-center gap-2 text-xs text-emerald-400/80">
                                            <CheckCircle className="w-3 h-3" /> SOC2 Type II
                                        </div>
                                        <div className="flex items-center gap-2 text-xs text-emerald-400/80">
                                            <CheckCircle className="w-3 h-3" /> ISO 27001
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </FadeInSection>

                        {/* Feature 4: Analytics */}
                        <FadeInSection className="md:col-span-2 row-span-1">
                            <div className="group h-full glass-panel rounded-3xl p-10 hover:border-blue-500/50 transition-all duration-500 flex flex-col md:flex-row gap-10 items-center overflow-hidden">
                                <div className="flex-1 relative z-10">
                                    <div className="w-12 h-12 bg-white/5 rounded-xl flex items-center justify-center mb-6 border border-white/10 text-blue-400">
                                        <Activity className="w-6 h-6" />
                                    </div>
                                    <h3 className="text-2xl font-bold text-white mb-3">Instant Observability</h3>
                                    <p className="text-slate-400 text-lg">
                                        No setup required. Get full-stack visibility with traces, logs, and metrics out of the box.
                                    </p>
                                </div>
                                <div className="flex-1 w-full h-full relative flex items-center justify-center">
                                    <div className="w-full bg-[#05050A] rounded-xl border border-white/10 p-4 shadow-xl">
                                        <div className="flex items-end justify-between gap-1 h-32">
                                            {[35, 60, 45, 80, 55, 90, 70, 85, 65, 50].map((h, i) => (
                                                <div key={i} className="w-full bg-blue-500/20 rounded-t-sm relative overflow-hidden group-hover:bg-blue-500/30 transition-colors">
                                                    <div style={{ height: `${h}%` }} className="absolute bottom-0 w-full bg-blue-500 shadow-[0_0_10px_#3b82f6]"></div>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </FadeInSection>

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

            {/* ================= DEVELOPER SECTION ================= */}
            <section className="py-32 border-t border-white/5 relative overflow-hidden">
                <div className="absolute inset-0 bg-[#05050A]"></div>
                <div className="max-w-[1400px] mx-auto px-6 grid lg:grid-cols-2 gap-20 items-center relative z-10">
                    <FadeInSection>
                        <div className="inline-flex items-center gap-2 text-indigo-400 font-mono text-xs font-bold mb-6 tracking-widest uppercase">
                            <Terminal className="w-4 h-4" />
                            Developer First
                        </div>
                        <h2 className="text-4xl md:text-6xl font-bold text-white mb-6 leading-tight">
                            Power to the <br /> <span className="text-slate-500">Builders.</span>
                        </h2>
                        <p className="text-slate-400 text-lg mb-8 leading-relaxed">
                            Our CLI provides a seamless bridge between your local environment and the cloud.
                            Preview deployments with a single command.
                        </p>

                        <div className="grid grid-cols-2 gap-y-4 gap-x-8 mb-10">
                            {[
                                "Instant Rollbacks",
                                "Preview Environments",
                                "Edge Caching",
                                "Automatic SSL"
                            ].map((item, i) => (
                                <div key={i} className="flex items-center gap-3 text-slate-300">
                                    <div className="w-1.5 h-1.5 rounded-full bg-indigo-500 shadow-[0_0_8px_#6366f1]"></div> {item}
                                </div>
                            ))}
                        </div>

                        <button className="text-white border-b border-indigo-500 pb-1 hover:text-indigo-400 transition-colors flex items-center gap-2 text-sm font-bold tracking-wide">
                            Read the Docs <ArrowUpRight className="w-4 h-4" />
                        </button>
                    </FadeInSection>

                    <FadeInSection delay={200}>
                        <div className="glass-panel rounded-xl shadow-2xl p-6 font-mono text-sm relative group overflow-hidden">
                            <div className="flex items-center justify-between mb-6 border-b border-white/5 pb-4">
                                <div className="flex gap-2">
                                    <div className="w-3 h-3 rounded-full bg-slate-700"></div>
                                    <div className="w-3 h-3 rounded-full bg-slate-700"></div>
                                    <div className="w-3 h-3 rounded-full bg-slate-700"></div>
                                </div>
                                <div className="text-slate-600 text-xs">terminal</div>
                            </div>

                            <div className="space-y-4">
                                <div>
                                    <div className="flex gap-2 mb-1">
                                        <span className="text-indigo-400">➜</span>
                                        <span className="text-slate-300">nexus deploy --prod</span>
                                    </div>
                                    <div className="text-slate-500 pl-4 border-l border-white/5">
                                        <div className="text-emerald-400">✔ Build completed (450ms)</div>
                                        <div className="text-emerald-400">✔ Optimizing assets</div>
                                        <div className="text-emerald-400">✔ Uploading to Edge Network</div>
                                    </div>
                                </div>

                                <div className="p-4 bg-black/40 border border-white/5 rounded-lg">
                                    <div className="text-slate-400 text-xs uppercase tracking-widest mb-1">Deployment URL</div>
                                    <div className="text-blue-400 hover:underline cursor-pointer">https://project-gamma.nexus.app</div>
                                </div>
                            </div>
                        </div>
                    </FadeInSection>
                </div>
            </section>

            {/* ================= MODAL ================= */}
            {videoOpen && (
                <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/90 backdrop-blur-md p-6 animate-in fade-in duration-300">
                    <div className="relative w-full max-w-5xl bg-black border border-white/10 rounded-2xl overflow-hidden shadow-2xl">
                        <button
                            onClick={() => setVideoOpen(false)}
                            className="absolute top-4 right-4 z-10 p-2 bg-black/50 hover:bg-white/10 text-white rounded-full transition-colors"
                        >
                            <X className="w-6 h-6" />
                        </button>
                        <div className="aspect-video bg-zinc-900 relative">
                            <iframe
                                width="100%"
                                height="100%"
                                src="https://www.youtube.com/embed/LXb3EKWsInQ?autoplay=1"
                                title="NexusOS Keynote"
                                frameBorder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowFullScreen
                                className="w-full h-full"
                            ></iframe>
                        </div>
                    </div>
                </div>
            )}

        </div>
    );
}