"use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Database, Cpu, ShieldCheck, Globe, BarChart3, Sparkles } from "lucide-react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } // --- VISUAL COMPONENTS FOR THE CORE --- const DataVisual = () => (

{[1, 2, 3].map(i => ( ))}

); const ProcessingVisual = () => (

); const SecurityVisual = () => (

); const NetworkVisual = () => (

{[0, 120, 240].map((angle, i) => (

))}

); const AnalyticsVisual = () => (

{[40, 70, 45, 90, 65, 80].map((h, i) => ( ))}

); // --- MAIN COMPONENT --- export interface OrbitalFeature { id: string; title: string; description: string; icon: React.ElementType; Visual: React.FC; colorClass: string; } const defaultFeatures: OrbitalFeature[] = [ { id: "ingestion", title: "Global Data Ingestion", description: "Funnel millions of events per second into our scalable data lakes. Perfect for high-throughput IoT and telemetry data.", icon: Database, Visual: DataVisual, colorClass: "text-blue-500 bg-blue-500/10 border-blue-500/30 shadow-[0_0_20px_rgba(59,130,246,0.2)]" }, { id: "processing", title: "Real-time Processing", description: "Transform and filter your data streams instantly using our low-latency edge computing nodes.", icon: Cpu, Visual: ProcessingVisual, colorClass: "text-emerald-500 bg-emerald-500/10 border-emerald-500/30 shadow-[0_0_20px_rgba(16,185,129,0.2)]" }, { id: "security", title: "Active Threat Detection", description: "AI-driven anomaly detection scans every packet. Automatically block DDoS attacks and malicious payloads before they hit your core.", icon: ShieldCheck, Visual: SecurityVisual, colorClass: "text-rose-500 bg-rose-500/10 border-rose-500/30 shadow-[0_0_20px_rgba(244,63,94,0.2)]" }, { id: "cdn", title: "Edge CDN Distribution", description: "Serve your assets from 35+ regions worldwide. Ensure your users get sub-50ms load times no matter where they are located.", icon: Globe, Visual: NetworkVisual, colorClass: "text-violet-500 bg-violet-500/10 border-violet-500/30 shadow-[0_0_20px_rgba(139,92,246,0.2)]" }, { id: "analytics", title: "Live Analytics Engine", description: "Visualize your entire ecosystem in real-time. Build custom dashboards that render complex aggregations instantly.", icon: BarChart3, Visual: AnalyticsVisual, colorClass: "text-amber-500 bg-amber-500/10 border-amber-500/30 shadow-[0_0_20px_rgba(245,158,11,0.2)]" } ]; export interface OrbitalFeatureCoreProps { badge?: string; heading?: string; subheading?: string; features?: OrbitalFeature[]; className?: string; autoPlayInterval?: number; } export function OrbitalFeatureCore({ badge = "The Core Engine", heading = "A universe of tools. One ecosystem.", subheading = "Click on the orbital nodes to explore how each interconnected layer powers your infrastructure with unprecedented speed and reliability.", features = defaultFeatures, className, autoPlayInterval = 5000 }: OrbitalFeatureCoreProps) { const [activeIndex, setActiveIndex] = useState(0); const [isHovered, setIsHovered] = useState(false); const angleStep = 360 / features.length; useEffect(() => { if (!isHovered && autoPlayInterval > 0) { const timer = setInterval(() => { setActiveIndex((prev) => (prev + 1) % features.length); }, autoPlayInterval); return () => clearInterval(timer); } }, [isHovered, features.length, autoPlayInterval]); const activeFeature = features[activeIndex]; const ActiveVisual = activeFeature.Visual; return (

{/* HEADER */}

{badge && ( {badge} )} {heading} {subheading}

{/* ORBITAL LAYOUT */}

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > {/* The Orbit Container */}

{/* Central Core (The Visual) */}

{/* Orbit Track */}

{/* Orbiting Nodes */} {features.map((feature, i) => { const rotation = i * angleStep; const isActive = activeIndex === i; const Icon = feature.icon; return (

setActiveIndex(i)} aria-label={`View ${feature.title}`} >

); })}

{/* FEATURE DETAILS */}

{activeFeature.title}

{activeFeature.description}

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

); }