"use client"; import React, { useRef, useState, useEffect } from "react"; import { motion, useMotionValue, useSpring, useTransform, useMotionTemplate } from "framer-motion"; import { ShieldAlert, Globe, Activity, Terminal, Lock, Cpu } from "lucide-react"; export default function NexusThreatHudCard() { const containerRef = useRef(null); const [isMounted, setIsMounted] = useState(false); const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); const springConfig = { stiffness: 80, damping: 20 }; const smoothX = useSpring(mouseX, springConfig); const smoothY = useSpring(mouseY, springConfig); const rotateX = useTransform(smoothY, [-0.5, 0.5], ["8deg", "-8deg"]); const rotateY = useTransform(smoothX, [-0.5, 0.5], ["-8deg", "8deg"]); const parallaxCoreX = useTransform(smoothX, [-0.5, 0.5], [-10, 10]); const parallaxCoreY = useTransform(smoothY, [-0.5, 0.5], [-10, 10]); const parallaxNode1X = useTransform(smoothX, [-0.5, 0.5], [25, -25]); const parallaxNode1Y = useTransform(smoothY, [-0.5, 0.5], [25, -25]); const parallaxNode2X = useTransform(smoothX, [-0.5, 0.5], [-25, 25]); const parallaxNode2Y = useTransform(smoothY, [-0.5, 0.5], [-25, 25]); const glowX = useTransform(smoothX, [-0.5, 0.5], [0, 100]); const glowY = useTransform(smoothY, [-0.5, 0.5], [0, 100]); const spotlight = useMotionTemplate` radial-gradient( 600px circle at ${glowX}% ${glowY}%, rgba(225, 29, 72, 0.12), transparent 60% ) `; useEffect(() => { setIsMounted(true); }, []); const handleMouseMove = (e: React.MouseEvent) => { if (!containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); const xPct = (e.clientX - rect.left) / rect.width - 0.5; const yPct = (e.clientY - rect.top) / rect.height - 0.5; mouseX.set(xPct); mouseY.set(yPct); }; const handleMouseLeave = () => { mouseX.set(0); mouseY.set(0); }; if (!isMounted) { return (

); } return (

{/* Ambient background glow */}

{/* Spotlight Effect */} {/* Grid Blueprint Texture */}

{/* Dynamic SVG Connection Lines */}

{/* --- INTERNAL 3D LAYOUT --- */}

{/* Top Left Header */}

Net_Watch v3.4.1

{/* Top Right Status */}

Intrusion Detected

{/* --- CENTRAL CORE --- */} {/* Radar Rings */}

Target Lock 192.168.1.88

{/* --- FLOATING NODE 1 (Left - Threat Level) --- */}

Threat Level

98%

CRITICAL

{/* --- FLOATING NODE 2 (Right - System Origin) --- */}

Origin Vector

UNKNOWN PROXY

{[1, 2, 3, 4, 5, 6].map((i) => (

4 ? 'bg-zinc-200 dark:bg-zinc-800' : 'bg-rose-500/50'}`} /> ))}

{/* --- BOTTOM ACTION BAR --- */}

{/* FIX: CSS Conflict Resolved by using hidden @md:flex instead of mixing flex and hidden */}

Auto-Defense Evaluating...

); }