"use client"; import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Terminal, Cpu, ShieldAlert, Activity, Binary, Zap } from "lucide-react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } const systems = [ { id: "SYS-01", label: "Neural Breach", status: "ENCRYPTED", code: "0x882_X", icon: ShieldAlert, description: "Multi-vector infiltration protection with quantum-resistant key rotation.", color: "text-red-500", bg: "bg-red-500/5", }, { id: "SYS-02", label: "Core Flux", status: "STABLE", code: "0x114_Y", icon: Cpu, description: "Asynchronous processing units optimized for high-frequency algorithmic trade-offs.", color: "text-cyan-400", bg: "bg-cyan-400/5", }, { id: "SYS-03", label: "Trace Route", status: "ACTIVE", code: "0x990_Z", icon: Activity, description: "Autonomous packet tracing across decentralized mesh nodes with zero-hop latency.", color: "text-emerald-400", bg: "bg-emerald-400/5", }, { id: "SYS-04", label: "Void Sync", status: "SYNCING", code: "0x002_W", icon: Binary, description: "Low-level binary synchronization for distributed ledger integrity and finality.", color: "text-amber-400", bg: "bg-amber-400/5", } ]; export function FeatureGlitchControlMatrix() { const [hovered, setHovered] = useState(null); return (

{/* Background Matrix Decor */}

{Array.from({ length: 100 }).map((_, i) => ( {(Math.random() > 0.5 ? 1 : 0)} ))}

{/* Header HUD */}

Internal_System_Access

Command
Matrix.

Security_Level Class_04

{/* Matrix Grid */}

{systems.map((item) => (

setHovered(item.id)} onMouseLeave={() => setHovered(null)} className={cn( "relative group p-10 bg-black transition-all duration-300 cursor-crosshair overflow-hidden", hovered === item.id ? "z-20" : "z-10" )} > {/* Glitch Background Effect */} {hovered === item.id && ( <> )}

{item.id}

{item.status}

{item.label}

{item.description}

Hash_Root: {item.code}

{/* Decorative Corner */}

))}

{/* Technical Footer */}

Uptime: 99.999% Auth_Token: Verified Live_Signal

); } export default function FeatureGlitchControlMatrixDemo() { return ; }

Command Matrix.

{item.label}

Command
Matrix.