import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Globe2, Activity, Server, MapPin, X, ArrowRight, ShieldCheck, Zap } from "lucide-react"; const NODES = [ { id: "sng", name: "Singapore-01", x: 15, y: 65, type: "edge" }, { id: "fra", name: "Frankfurt-EU", x: 45, y: 35, type: "relay" }, { id: "lon", name: "London-Core", x: 60, y: 25, type: "core" }, { id: "nyc", name: "NewYork-US", x: 85, y: 55, type: "destination" }, ]; export default function GlobalNetworkRoutingCanvas() { const [isOpen, setIsOpen] = useState(false); const [phase, setPhase] = useState<"idle" | "scanning" | "routing" | "resolved">("idle"); const [visibleNodes, setVisibleNodes] = useState([]); const [ping, setPing] = useState(0); useEffect(() => { if (!isOpen) { setPhase("idle"); setVisibleNodes([]); setPing(0); return; } setPhase("scanning"); // Reveal nodes one by one to simulate scanning const timeouts: NodeJS.Timeout[] = []; NODES.forEach((node, index) => { timeouts.push( setTimeout(() => { setVisibleNodes((prev) => [...prev, node.id]); }, 400 + index * 400) ); }); timeouts.push(setTimeout(() => setPhase("routing"), 2200)); timeouts.push(setTimeout(() => setPhase("resolved"), 4000)); return () => timeouts.forEach(clearTimeout); }, [isOpen]); // Simulate Ping fluctuations when resolved useEffect(() => { let pingInterval: NodeJS.Timeout; if (phase === "resolved") { setPing(24); pingInterval = setInterval(() => { setPing(24 + Math.floor(Math.random() * 4 - 2)); }, 800); } return () => clearInterval(pingInterval); }, [phase]); return (

{/* Background World Map / Dot Grid */}

{!isOpen && ( setIsOpen(true)} className="relative z-10 flex items-center gap-2 px-8 py-4 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-2xl font-bold tracking-wide transition-all shadow-xl hover:shadow-2xl" > Establish Secure Route )} {isOpen && ( {/* The Scanning Beam */} {phase === "scanning" && ( )} {/* SVG Connections (Drawn during routing) */} {/* The Nodes */} {NODES.map((node) => ( {visibleNodes.includes(node.id) && (

{/* Node Pulse */} {(phase === "routing" || phase === "resolved") && ( )} {/* Node Icon */}

{node.type === "destination" ? ( ) : ( )}

{/* Node Label */}

{node.name}

)} ))} {/* Slide-in Side Panel (Replaces the central modal) */} {phase === "resolved" && ( {/* Panel Header */}

Tunnel Active

End-to-End Encrypted

{/* Panel Content */}

{/* Routing Path */}

Network Path

{NODES.map((node, i) => (

{i === NODES.length - 1 ? : }

{node.name}

IP: 192.168.{i}.{i * 10 + 5}

))}

{/* Metrics Grid */}

Latency

{ping}

Bandwidth

2.4

Gbps

)} )}