"use client";
import React, { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { SpotlightCard } from "@/components/SpotlightCard";
import { 
  Sparkles, Terminal, Cpu, ShieldCheck, Sliders, Activity, 
  ChevronRight, ArrowRight, Zap, Play, CheckCircle2, Languages, Globe 
} from "lucide-react";
import Link from "next/link";

interface AgentNode {
  id: string;
  name: string;
  href: string;
  desc: string;
  color: string;
  icon: string;
  x: number; // coordinates for the SVG layout
  y: number;
}

const AGENT_NODES: AgentNode[] = [
  { id: "energy", name: "AI Energy", href: "/ai-energy", desc: "ISO 50001 EnPI and peak demand load management.", color: "#00d4ff", icon: "⚡", x: 120, y: 80 },
  { id: "carbon", name: "AI Carbon", href: "/ai-carbon", desc: "Scope 1/2/3 automated ledgers and CSRD compliance.", color: "#00ff88", icon: "🌱", x: 280, y: 80 },
  { id: "maint", name: "AI Maintenance", href: "/ai-maintenance", desc: "Remaining Useful Life forecasting and acoustic vibration scans.", color: "#ffaa00", icon: "🔧", x: 360, y: 200 },
  { id: "mfg", name: "AI Manufacturing", href: "/ai-manufacturing", desc: "Shift OEE optimization and packaging line micro-halts.", color: "#a855f7", icon: "🏭", x: 280, y: 320 },
  { id: "process", name: "AI Process", href: "/ai-process", desc: "Kiln thermal profiles and mill raw feed baselines.", color: "#ff007f", icon: "⚙️", x: 120, y: 320 },
  { id: "pq", name: "AI Power Quality", href: "/ai-power-quality", desc: "Harmonics distortion indexes (THD) and sag analysis.", color: "#0066ff", icon: "🔌", x: 40, y: 200 }
];

const SIMULATION_STEPS = [
  {
    step: 1,
    title: "Retrieve electrical telemetry",
    desc: "Querying active Modbus sub-meters and power analyzers on Feeder A.",
    console: "SYS_NET: Pinging Feeder_A_Analyzer...\n>> Connection established: Modbus TCP (Port 502).\n>> Ingesting phase-to-phase current/voltage registers..."
  },
  {
    step: 2,
    title: "Analyze harmonic distortion",
    desc: "Calculating Fast Fourier Transform (FFT) on active wave signatures.",
    console: "SYS_MATH: Computing 1024-point FFT vectors...\n>> THDV: Phase A: 3.12% | Phase B: 2.86% | Phase C: 3.36%\n>> THDI: Phase A: 14.39% | Phase B: 12.95% | Phase C: 13.37%"
  },
  {
    step: 3,
    title: "Verify international standards",
    desc: "Comparing distortion values against IEEE 519 and EN 50160 codes.",
    console: "SYS_STANDARDS: Matching limits with IEEE 519 Table 1...\n>> Voltage distortion (THDV 3.12% < 5.0% limit): COMPLIANT.\n>> Current distortion (THDI 14.39% > 8.0% limit): CRITICAL NON-COMPLIANCE."
  },
  {
    step: 4,
    title: "Identify root cause",
    desc: "Isolating harmonic triggers using multi-variable correlation models.",
    console: "SYS_DIAG: Correlating THDI spike times with motor drive cycles...\n>> Source isolated: 5th harmonic distortion (250Hz) matching switching cycles on Variable Frequency Drives (VFD) #3 and #4."
  },
  {
    step: 5,
    title: "Harmonic filter sizing",
    desc: "Sizing active harmonic filter (AHF) mitigation vectors.",
    console: "SYS_SIMULATION: Running filter configuration solvers...\n>> Recommended: 150 kVAR Active Harmonic Filter (AHF) tuned specifically to eliminate 5th, 7th, and 11th order currents on Bus A."
  },
  {
    step: 6,
    title: "Waveform correction toggle",
    desc: "Simulating filter activation and before/after waveforms.",
    console: "SYS_SUCCESS: Filter injection vectors computed.\n>> THDI projected drop: 14.39% → 3.82%.\n>> Sinusoidal current wave restored to nominal stability."
  }
];

export default function AIEngineerPage() {
  const [selectedAgent, setSelectedAgent] = useState<AgentNode>(AGENT_NODES[0]);
  const [simStep, setSimStep] = useState(1);
  const [isPlaying, setIsPlaying] = useState(false);
  const [activeLang, setActiveLang] = useState("tn");

  useEffect(() => {
    let interval: any;
    if (isPlaying) {
      interval = setInterval(() => {
        setSimStep((prev) => {
          if (prev === 6) {
            setIsPlaying(false);
            return 1;
          }
          return prev + 1;
        });
      }, 3500);
    }
    return () => clearInterval(interval);
  }, [isPlaying]);

  return (
    <div className="relative min-h-screen pt-20 pb-16 overflow-hidden">
      {/* Background Grids */}
      <div className="pointer-events-none absolute inset-0 orbit-grid-mesh opacity-80" />
      <div className="pointer-events-none absolute inset-0 orbit-radial-glow" />

      <div className="mx-auto max-w-7xl px-6 lg:px-8 relative z-10 space-y-16">
        
        {/* Cinematic Hero */}
        <div className="max-w-3xl space-y-6">
          <div className="inline-flex items-center gap-1.5 rounded-full border border-orbit-cyan/20 bg-orbit-cyan/5 px-4 py-1.5 font-mono text-xs font-bold text-orbit-cyan">
            <Sparkles className="h-4 w-4 animate-pulse" />
            Autonomous Industrial Engineering Platform
          </div>
          <h1 className="text-4xl font-extrabold tracking-tight sm:text-6xl text-slate-900 dark:text-slate-100 leading-tight">
            Your Autonomous <br />
            <span className="bg-gradient-to-r from-orbit-cyan to-orbit-purple bg-clip-text text-transparent">Industrial AI Engineer</span>
          </h1>
          <p className="text-base md:text-lg leading-relaxed text-slate-600 dark:text-slate-400">
            Graduating from monitoring to autonomous engineering actions. Orbit AI integrates deep-domain multi-agent systems connected to your factory databases, PLC registers, and power grids.
          </p>
        </div>

        {/* Section Divider */}
        <div className="orbit-speed-line h-[1px] bg-gradient-to-r from-transparent via-orbit-cyan/25 to-transparent" />

        {/* MULTI-AGENT ARCHITECTURE DIAGRAM SECTION */}
        <section className="grid gap-12 lg:grid-cols-12 lg:items-center">
          <div className="lg:col-span-7 space-y-6">
            <div className="inline-flex rounded-full border border-orbit-purple/20 bg-orbit-purple/5 px-3 py-1 font-mono text-[10px] font-bold uppercase tracking-widest text-orbit-purple">
              Dynamic Multi-Agent System
            </div>
            <h2 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white md:text-4xl">
              Specialized Neural Agents. <br />
              <span className="bg-gradient-to-r from-orbit-cyan to-orbit-purple bg-clip-text text-transparent">Central Coordination.</span>
            </h2>
            <p className="text-sm leading-relaxed text-slate-600 dark:text-slate-400">
              Industrial processes are too physical for single-model LLMs. Orbit deploys specialized expert agents (Energy, Carbon, Process, etc.) synchronized by a Central Coordination Engine to deliver precise, regulatory-grade responses.
            </p>

            <div className="rounded-2xl border border-orbit-border bg-orbit-bg-deep p-5 space-y-4">
              <div className="flex justify-between items-center border-b border-slate-900 pb-2">
                <span className="font-mono text-xs font-bold text-slate-900 dark:text-white flex items-center gap-1.5">
                  <span className="h-2 w-2 rounded-full" style={{ backgroundColor: selectedAgent.color }} />
                  {selectedAgent.name} Agent Profile
                </span>
                <Link 
                  href={selectedAgent.href} 
                  className="font-mono text-[9px] text-orbit-cyan hover:underline flex items-center gap-0.5"
                >
                  Explore Dedicated Page <ChevronRight className="h-3 w-3" />
                </Link>
              </div>
              <p className="font-sans text-xs text-slate-600 dark:text-slate-400 leading-relaxed">
                {selectedAgent.desc}
              </p>
            </div>
          </div>

          {/* Interactive Multi-Agent Network Visualizer */}
          <div className="lg:col-span-5 flex justify-center items-center">
            <div className="relative aspect-square w-full max-w-[400px] rounded-3xl border border-slate-800 bg-orbit-bg-deep/50 p-6 flex items-center justify-center overflow-hidden">
              
              {/* Animated Core coordination orb */}
              <div className="relative z-10 flex h-20 w-20 items-center justify-center rounded-full bg-orbit-bg-primary border border-orbit-cyan/30 shadow-[0_0_20px_rgba(0,212,255,0.15)]">
                <div className="absolute inset-[-4px] rounded-full bg-gradient-to-br from-orbit-cyan to-orbit-purple opacity-30 blur animate-[spin_6s_linear_infinite]" />
                <span className="font-mono text-[9px] font-bold text-slate-700 dark:text-slate-300 text-center tracking-widest">CO-ORD ENGINE</span>
              </div>

              {/* Node layout markers */}
              {AGENT_NODES.map((node) => {
                const isActive = selectedAgent.id === node.id;
                return (
                  <button
                    key={node.id}
                    onClick={() => setSelectedAgent(node)}
                    className="absolute z-20 flex h-11 w-11 items-center justify-center rounded-full bg-orbit-bg-primary border transition-all duration-300 hover:scale-110 active:scale-95 shadow-lg"
                    style={{
                      left: node.x,
                      top: node.y,
                      borderColor: isActive ? node.color : "rgba(255,255,255,0.06)",
                      boxShadow: isActive ? `0 0 15px ${node.color}50` : "none"
                    }}
                  >
                    <span className="text-base">{node.icon}</span>
                  </button>
                );
              })}

              {/* Dynamic SVG Connections lines */}
              <svg className="absolute inset-0 w-full h-full pointer-events-none stroke-current" stroke="rgba(255,255,255,0.05)" strokeWidth="1.5">
                {AGENT_NODES.map((node) => (
                  <line 
                    key={node.id}
                    x1="200" 
                    y1="200" 
                    x2={node.x + 22} 
                    y2={node.y + 22} 
                    stroke={selectedAgent.id === node.id ? node.color : "rgba(255,255,255,0.05)"}
                    strokeWidth={selectedAgent.id === node.id ? "2.5" : "1.5"}
                    strokeDasharray={selectedAgent.id === node.id ? "5 3" : "none"}
                    className={selectedAgent.id === node.id ? "animate-[dash_2s_linear_infinite]" : ""}
                  />
                ))}
              </svg>
            </div>
          </div>
        </section>

        {/* Section Divider */}
        <div className="orbit-speed-line h-[1px] bg-gradient-to-r from-transparent via-orbit-cyan/25 to-transparent" />

        {/* IMMERSIVE HARMONIC DISTORTION USE CASE SIMULATOR */}
        <section className="space-y-8">
          <div className="text-center max-w-3xl mx-auto space-y-4">
            <div className="inline-flex rounded-full border border-orbit-cyan/20 bg-orbit-cyan/5 px-3 py-1 font-mono text-[10px] font-bold uppercase tracking-widest text-orbit-cyan">
              Immersive Use Case Demonstration
            </div>
            <h2 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white md:text-4xl">
              12-Step Electrical Harmonics Auditing
            </h2>
            <p className="text-sm leading-relaxed text-slate-600 dark:text-slate-400">
              Watch Orbit AI analyze real power quality telemetry, detect critical harmonic non-compliance, size an active filter vector, and simulate sinusoidal recovery.
            </p>
          </div>

          <div className="rounded-3xl border border-orbit-border bg-orbit-bg-primary overflow-hidden shadow-2xl grid grid-cols-1 lg:grid-cols-12">
            
            {/* Interactive Terminal (7 cols) */}
            <div className="lg:col-span-7 p-6 border-b lg:border-b-0 lg:border-r border-orbit-border/60 bg-slate-950/20 flex flex-col justify-between space-y-6">
              <div className="flex justify-between items-center border-b border-slate-900 pb-3">
                <div className="flex items-center gap-2">
                  <Terminal className="h-4 w-4 text-orbit-cyan" />
                  <span className="font-mono text-xs font-bold text-slate-800 dark:text-slate-200">ORBIT_HARMONICS_AUDIT_CLI</span>
                </div>
                <div className="flex items-center gap-2">
                  <button
                    onClick={() => {
                      setIsPlaying(!isPlaying);
                      if (!isPlaying && simStep === 6) setSimStep(1);
                    }}
                    className="flex h-6 w-6 items-center justify-center rounded-full bg-orbit-cyan/15 border border-orbit-cyan/30 text-orbit-cyan hover:bg-orbit-cyan/25 active:scale-90 transition-all"
                  >
                    <Play className={`h-3 w-3 ${isPlaying ? "animate-pulse" : ""}`} />
                  </button>
                  <span className="font-mono text-[9px] text-slate-500">Auto-Cycle</span>
                </div>
              </div>

              {/* Chat CLI console */}
              <div className="rounded-2xl border border-slate-900 bg-orbit-bg-deep p-4 font-mono text-xs text-slate-700 dark:text-slate-300 min-h-[140px] leading-relaxed whitespace-pre-line border-orbit-cyan/10">
                <div className="text-slate-500 mb-2">operator@orbit-solutions:~$ run pq_audit --feeder=A</div>
                <div className="text-emerald-400">
                  {SIMULATION_STEPS[simStep - 1].console}
                </div>
              </div>

              {/* Navigation Steps */}
              <div className="grid grid-cols-3 sm:grid-cols-6 gap-2">
                {SIMULATION_STEPS.map((s) => (
                  <button
                    key={s.step}
                    onClick={() => {
                      setSimStep(s.step);
                      setIsPlaying(false);
                    }}
                    className={`p-2.5 rounded-xl border font-mono text-[10px] text-center transition-all ${
                      simStep === s.step
                        ? "border-orbit-cyan bg-orbit-cyan/5 text-orbit-cyan"
                        : "border-slate-800 bg-slate-950/20 text-slate-500 hover:text-slate-700 dark:text-slate-300"
                    }`}
                  >
                    Step {s.step}
                  </button>
                ))}
              </div>
            </div>

            {/* Simulated Live Waveform / Sizing overlay (5 cols) */}
            <div className="lg:col-span-5 p-6 flex flex-col justify-between space-y-6">
              <div className="space-y-4">
                <h3 className="font-mono text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-widest">
                  LIVE TELEMETRY TWIN VIEW
                </h3>

                {/* SVG canvas showing distorted vs clean wave */}
                <div className="relative aspect-square w-full max-w-[280px] mx-auto rounded-2xl bg-orbit-bg-deep border border-slate-900 p-4 overflow-hidden flex items-center justify-center">
                  <div className="absolute inset-0 bg-[radial-gradient(#ffffff_0.5px,transparent_0.5px)] [background-size:12px_12px] opacity-5" />

                  <svg viewBox="0 0 200 200" className="w-full h-full overflow-visible">
                    {/* Center zero-axis */}
                    <line x1="10" y1="100" x2="190" y2="100" stroke="rgba(255,255,255,0.05)" strokeWidth="1.5" />
                    
                    {simStep < 6 ? (
                      /* Distorted wave (Noisy sine wave) */
                      <path
                        d="M 10 100 L 20 70 L 30 40 L 35 65 L 40 45 L 45 80 L 50 100 L 60 130 L 70 160 L 75 135 L 80 155 L 85 120 L 90 100 L 100 70 L 110 40 L 115 65 L 120 45 L 125 80 L 130 100 L 140 130 L 150 160 L 155 135 L 160 155 L 165 120 L 170 100"
                        fill="none"
                        stroke="#ff6b35"
                        strokeWidth="2.5"
                        strokeLinecap="round"
                        className="animate-pulse"
                      />
                    ) : (
                      /* Clean sine wave */
                      <path
                        d="M 10 100 Q 50 20 90 100 T 170 100"
                        fill="none"
                        stroke="#00ff88"
                        strokeWidth="3.5"
                        strokeLinecap="round"
                      />
                    )}
                  </svg>

                  {/* Indicator tags */}
                  <div className="absolute top-3 left-3 font-mono text-[8px] uppercase tracking-widest text-slate-500">
                    Active wave state
                  </div>
                  <div className="absolute bottom-3 right-3 font-mono text-[9px] font-bold text-slate-800 dark:text-slate-200">
                    {simStep < 6 ? (
                      <span className="text-orbit-orange">THDI: 14.39% (CRITICAL)</span>
                    ) : (
                      <span className="text-orbit-green">THDI: 3.82% (SAFE)</span>
                    )}
                  </div>
                </div>

                {/* Sizing description */}
                <div className="rounded-xl border border-slate-800 bg-slate-900/40 p-4 space-y-2">
                  <span className="font-mono text-[10px] font-bold text-slate-600 dark:text-slate-400 uppercase tracking-widest block">
                    {SIMULATION_STEPS[simStep - 1].title}
                  </span>
                  <p className="text-xs text-slate-500 leading-normal">
                    {SIMULATION_STEPS[simStep - 1].desc}
                  </p>
                </div>
              </div>

              <div className="p-3 bg-orbit-cyan/5 border border-orbit-cyan/10 rounded-xl font-mono text-[9px] text-orbit-cyan text-center flex items-center gap-1.5 justify-center">
                <ShieldCheck className="h-4 w-4 shrink-0 text-orbit-cyan" />
                <span>Simulation validated in accordance with IEEE 519-2022.</span>
              </div>
            </div>

          </div>
        </section>

        {/* Section Divider */}
        <div className="orbit-speed-line h-[1px] bg-gradient-to-r from-transparent via-orbit-cyan/25 to-transparent" />

        {/* DYNAMIC MULTILINGUAL INTERACTION SECTION */}
        <section className="grid gap-12 lg:grid-cols-12 lg:items-center">
          <div className="lg:col-span-6 space-y-6">
            <div className="inline-flex rounded-full border border-orbit-cyan/20 bg-orbit-cyan/5 px-3 py-1 font-mono text-[10px] font-bold uppercase tracking-widest text-orbit-cyan">
              Multi-Language Communication
            </div>
            <h2 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white md:text-4xl">
              Communicates Naturally. <br />
              <span className="bg-gradient-to-r from-orbit-cyan to-orbit-purple bg-clip-text text-transparent">Across Borders & Dialects.</span>
            </h2>
            <p className="text-sm leading-relaxed text-slate-600 dark:text-slate-400">
              From Tunisian dialect (Derja) to standard French, German, Italian, or English, Orbit AI processes operator instructions organically to make complex engineering variables accessible instantly.
            </p>

            {/* Language Selection Pills */}
            <div className="flex flex-wrap gap-2 pt-2">
              {[
                { id: "tn", label: "Tunisian Derja", code: "tn" },
                { id: "fr", label: "Français", code: "fr" },
                { id: "en", label: "English", code: "en" },
                { id: "de", label: "Deutsch", code: "de" },
                { id: "it", label: "Italiano", code: "it" }
              ].map((lang) => (
                <button
                  key={lang.id}
                  onClick={() => setActiveLang(lang.code)}
                  className={`px-3 py-1.5 rounded-full font-mono text-[10px] font-bold border transition-colors ${
                    activeLang === lang.code
                      ? "border-orbit-cyan bg-orbit-cyan/10 text-orbit-cyan"
                      : "border-slate-800 bg-slate-950/20 text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:text-slate-200"
                  }`}
                >
                  {lang.label}
                </button>
              ))}
            </div>
          </div>

          {/* Multilingual chat block mockup */}
          <div className="lg:col-span-6">
            <div className="rounded-3xl border border-orbit-border bg-orbit-bg-primary p-5 shadow-2xl space-y-4">
              <div className="flex gap-2.5 items-start">
                <div className="h-8 w-8 rounded-full border border-orbit-cyan/20 bg-orbit-cyan/5 flex items-center justify-center shrink-0">
                  <Terminal className="h-4 w-4 text-orbit-cyan" />
                </div>
                <div className="rounded-2xl border border-slate-900 bg-orbit-bg-deep p-4 space-y-2 text-xs font-mono w-full leading-normal">
                  <span className="text-slate-500 uppercase tracking-widest text-[9px] block">OPERATOR PROMPT</span>
                  <p className="text-slate-700 dark:text-slate-300">
                    {activeLang === "tn" && "ya Orbit, choufli compressour no.2 fihchi mochkla w 9olli 3al energy consumption."}
                    {activeLang === "fr" && "Orbit, analyse la consommation d'énergie du compresseur n°2 et signale s'il y a un problème."}
                    {activeLang === "en" && "Orbit, analyze the energy consumption of compressor no.2 and check if there's any problem."}
                    {activeLang === "de" && "Orbit, analysieren Sie den Energieverbrauch von Kompressor Nr. 2 und prüfen Sie auf Probleme."}
                    {activeLang === "it" && "Orbit, analizza il consumo energetico del compressore n. 2 e controlla eventuali problemi."}
                  </p>
                </div>
              </div>

              <div className="flex gap-2.5 items-start">
                <div className="h-8 w-8 rounded-full border border-orbit-purple/20 bg-orbit-purple/5 flex items-center justify-center shrink-0 animate-pulse">
                  <Sparkles className="h-4 w-4 text-orbit-purple" />
                </div>
                <div className="rounded-2xl border border-slate-900 bg-orbit-bg-deep p-4 space-y-2 text-xs font-mono w-full leading-normal border-orbit-purple/10">
                  <span className="text-orbit-purple uppercase tracking-widest text-[9px] block font-bold">ORBIT AI ENGINEER</span>
                  <p className="text-emerald-400">
                    {activeLang === "tn" && "SYS_MONITOR: Tfa9adet el compressour no.2.\n>> el energy specific mte3ou tal3a b 18% 3al baseline.\n>> famma dynamic thermal warning a3la mel 3ada b 4°C f bearing no.4.\n>> A3mel schedules le-maintenance 9bal ma yetkasser."}
                    {activeLang === "fr" && "SYS_MONITOR: Analyse du compresseur n°2 terminée.\n>> Consommation spécifique supérieure de 18% à la baseline.\n>> Alerte thermique dynamique détectée (+4°C) sur le roulement n°4.\n>> Planification recommandée de maintenance prédictive sous 72h."}
                    {activeLang === "en" && "SYS_MONITOR: Compressor no.2 analysis complete.\n>> Specific energy consumption is 18% above learned baseline.\n>> Dynamic thermal signature warning (+4°C) detected on bearing #4.\n>> Recommended: Schedule predictive bearing replacement within 72h."}
                    {activeLang === "de" && "SYS_MONITOR: Analyse von Kompressor Nr. 2 abgeschlossen.\n>> Spezifischer Energieverbrauch liegt 18 % über der Baseline.\n>> Dynamische thermische Warnung (+4°C) an Lager #4 erkannt.\n>> Empfohlen: Planen Sie einen Lageraustausch innerhalb von 72 Stunden."}
                    {activeLang === "it" && "SYS_MONITOR: Analisi del compressore n. 2 completata.\n>> Consumo energetico specifico superiore del 18% alla baseline.\n>> Rilevato allarme termico dinamico (+4°C) sul cuscinetto n. 4.\n>> Consigliato: pianificare la sostituzione del cuscinetto entro 72 ore."}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Section Divider */}
        <div className="orbit-speed-line h-[1px] bg-gradient-to-r from-transparent via-orbit-cyan/25 to-transparent" />

        {/* DEDICATED AGENT TILES GRID */}
        <section className="space-y-8">
          <div className="text-center max-w-3xl mx-auto space-y-4">
            <h2 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white md:text-4xl">
              Specialized <span className="bg-gradient-to-r from-orbit-cyan to-orbit-purple bg-clip-text text-transparent">AI Agents</span>
            </h2>
            <p className="text-sm leading-relaxed text-slate-600 dark:text-slate-400">
              Explore the dedicated pages of our specialized industrial AI agents.
            </p>
          </div>

          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
            {[
              { name: "Orbit AI Energy", href: "/ai-energy", desc: "Automate energy reviews, sub-meter EnPIs, and peak load shaving offsets.", icon: "⚡" },
              { name: "Orbit AI Carbon", href: "/ai-carbon", desc: "Centralized Scope 1, 2, and 3 carbon accounting ledgers for CSRD compliance.", icon: "🌱" },
              { name: "Orbit AI Maintenance", href: "/ai-maintenance", desc: "Mechanical vibration FFT analysis and remaining useful life (RUL) forecasting.", icon: "🔧" },
              { name: "Orbit AI Manufacturing", href: "/ai-manufacturing", desc: "Shift-level OEE calculations, packaging line pings, and loom breakage codes.", icon: "🏭" },
              { name: "Orbit AI Process", href: "/ai-process", desc: "Kiln thermal diagnostic scans, raw mill baselines, and tri-generation offsets.", icon: "⚙️" },
              { name: "Orbit AI Power Quality", href: "/ai-power-quality", desc: "Voltage THDV and THDI current harmonics distortion analysis.", icon: "🔌" },
              { name: "Orbit AI Simulation", href: "/ai-simulation", desc: "Before/after ROI modeling and peak load shifting offset calculations.", icon: "📊" },
              { name: "Orbit AI Reporting", href: "/ai-reporting", desc: "Automated PDF/Excel report engines and management reviews logs.", icon: "📄" }
            ].map((node) => (
              <Link href={node.href} key={node.name} className="block group">
                <SpotlightCard className="h-full rounded-2xl p-6 flex flex-col justify-between hover:border-orbit-cyan/30 transition-colors">
                  <div>
                    <span className="text-2xl mb-4 block">{node.icon}</span>
                    <h3 className="text-sm font-bold text-slate-900 dark:text-white group-hover:text-orbit-cyan transition-colors">{node.name}</h3>
                    <p className="text-xs text-slate-500 mt-2 leading-relaxed">{node.desc}</p>
                  </div>
                  <div className="mt-6 border-t border-slate-900 pt-4 flex justify-between items-center text-[10px] font-mono font-bold text-slate-600 dark:text-slate-400 group-hover:text-orbit-cyan transition-colors">
                    <span>Inspect Agent specs</span>
                    <ChevronRight className="h-3.5 w-3.5 group-hover:translate-x-1 transition-transform" />
                  </div>
                </SpotlightCard>
              </Link>
            ))}
          </div>
        </section>

      </div>
    </div>
  );
}