import React, { useState, useEffect, useRef } from 'react';

// Self-contained inline SVG icon components to eliminate module mismatch errors
const Zap = ({ className = "w-5 h-5" }) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
  </svg>
);

const Glasses = ({ className = "w-5 h-5" }) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="6" cy="15" r="4" />
    <circle cx="18" cy="15" r="4" />
    <path d="M14 15a2 2 0 0 0-2-2 2 2 0 0 0-2 2" />
    <path d="M2.5 13 5 7c.7-1.3 1.4-2 3-2" />
    <path d="M21.5 13 19 7c-.7-1.3-1.4-2-3-2" />
  </svg>
);

const Globe = ({ className = "w-5 h-5" }) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="10" />
    <line x1="2" y1="12" x2="22" y2="12" />
    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
  </svg>
);

const Activity = ({ className = "w-5 h-5" }) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
  </svg>
);

const Network = ({ className = "w-5 h-5" }) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="9" y="2" width="6" height="6" rx="1" />
    <rect x="2" y="16" width="6" height="6" rx="1" />
    <rect x="16" y="16" width="6" height="6" rx="1" />
    <path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3" />
    <path d="M12 12V8" />
  </svg>
);

const Cpu = ({ className = "w-10 h-10" }) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="4" y="4" width="16" height="16" rx="2" />
    <rect x="9" y="9" width="6" height="6" />
    <line x1="9" y1="1" x2="9" y2="4" />
    <line x1="15" y1="1" x2="15" y2="4" />
    <line x1="9" y1="20" x2="9" y2="23" />
    <line x1="15" y1="20" x2="15" y2="23" />
    <line x1="20" y1="9" x2="23" y2="9" />
    <line x1="20" y1="14" x2="23" y2="14" />
    <line x1="1" y1="9" x2="4" y2="9" />
    <line x1="1" y1="14" x2="4" y2="14" />
  </svg>
);

const Satellite = ({ className = "w-5 h-5" }) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M13 7 9 3 5 7l4 4" />
    <path d="m17 11 4 4-4 4-4-4" />
    <path d="m8 12 4 4 6-6-4-4Z" />
    <path d="m16 8 3-3" />
    <path d="M9 21a6 6 0 0 0-6-6" />
  </svg>
);

const Terminal = ({ className = "w-4 h-4" }) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="4 17 10 11 4 5" />
    <line x1="12" y1="19" x2="20" y2="19" />
  </svg>
);

const Trash2 = ({ className = "w-4 h-4" }) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="3 6 5 6 21 6" />
    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
    <line x1="10" y1="11" x2="10" y2="17" />
    <line x1="14" y1="11" x2="14" y2="17" />
  </svg>
);

const RefreshCw = ({ className = "w-4 h-4" }) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="23 4 23 10 17 10" />
    <polyline points="1 20 1 14 7 14" />
    <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
  </svg>
);

const Layers = ({ className = "w-4 h-4" }) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polygon points="12 2 2 7 12 12 22 7 12 2" />
    <polyline points="2 17 12 22 22 17" />
    <polyline points="2 12 12 17 22 12" />
  </svg>
);

// High-performance self-contained orbital telemetry SVG visualizer
const TelemetryChart = ({ data }) => {
  if (!data || data.length < 2) return null;
  const width = 500;
  const height = 140;
  const padding = 14;

  const minVal = 7300;
  const maxVal = 7900;
  const range = maxVal - minVal;

  const points = data.map((d, i) => {
    const x = padding + (i / (data.length - 1)) * (width - padding * 2);
    const clamped = Math.max(minVal, Math.min(maxVal, d.velocity));
    const y = height - padding - ((clamped - minVal) / range) * (height - padding * 2);
    return { x, y, ...d };
  });

  const pathD = points.reduce((acc, p, i) => (
    i === 0 ? `M ${p.x.toFixed(1)} ${p.y.toFixed(1)}` : `${acc} L ${p.x.toFixed(1)} ${p.y.toFixed(1)}`
  ), '');

  const areaD = `${pathD} L ${points[points.length - 1].x.toFixed(1)} ${height - padding} L ${points[0].x.toFixed(1)} ${height - padding} Z`;
  const latest = points[points.length - 1];

  return (
    <div className="w-full h-full relative flex items-center justify-center">
      <svg viewBox={`0 0 ${width} ${height}`} className="w-full h-full overflow-visible" preserveAspectRatio="none">
        <defs>
          <linearGradient id="orbitGradient" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#22d3ee" stopOpacity="0.4" />
            <stop offset="100%" stopColor="#0891b2" stopOpacity="0.0" />
          </linearGradient>
        </defs>
        {[0.25, 0.5, 0.75].map((ratio, idx) => {
          const y = padding + ratio * (height - padding * 2);
          return (
            <line key={idx} x1={padding} y1={y} x2={width - padding} y2={y} stroke="#164e63" strokeDasharray="3 3" strokeWidth="1" opacity="0.6" />
          );
        })}
        <path d={areaD} fill="url(#orbitGradient)" />
        <path d={pathD} fill="none" stroke="#22d3ee" strokeWidth="2" />
        <circle cx={latest.x} cy={latest.y} r="5" fill="#22d3ee" className="animate-ping opacity-75" />
        <circle cx={latest.x} cy={latest.y} r="3.5" fill="#67e8f9" />
      </svg>
      <div className="absolute top-2 right-2 text-xs font-mono font-bold text-cyan-300 bg-cyan-950/80 border border-cyan-800/80 px-2 py-0.5 rounded shadow-[0_0_10px_rgba(6,182,212,0.3)]">
        {latest.velocity.toFixed(1)} m/s
      </div>
    </div>
  );
};

const RANDOM_LOGS = [
  "> RECALIBRATING META AR OPTIC MESH...",
  "> QUANTUM ROUTER: PINGING STARLINK-Q9 MESH (0.24ms)...",
  "> GOOGLE XR SPATIAL ANCHORS TRANSLATED TO Q-COORDINATES.",
  "> ZERO-COPY QUANTUM IPC BUS: 41,200 APP PACKETS ROUTED.",
  "> WIN32/POSIX SHIM BYPASS TRIGGERED: NATIVE QUANTUM LINK ACTIVE.",
  "> DEPLOYING MICRO-SATELLITE FIRMWARE PATCH OVER POLAR ORBIT...",
  "> INJECTING HOLOGRAPHIC EYE-TRACK MATRIX TO META SMART RAY-BANS..."
];

export default function App() {
  const [terminalLogs, setTerminalLogs] = useState([
    "[SYSTEM INITIALIZED]: Quantum Nexus OS v4.9.0-QBIT",
    "[TARGET BRIDGES]: Meta AR Glasses | Google XR | SpaceX SatNet",
    "[IPC ARCHITECTURE]: Pure Quantum Hyper-Bus (Linux & NT Subsystems Deprecated)",
    "[STATUS]: Ready for quantum synchronization."
  ]);
  const [commandInput, setCommandInput] = useState('');
  const [isPurgingLegacy, setIsPurgingLegacy] = useState(false);
  const [purgeProgress, setPurgeProgress] = useState(0);
  const [qubitCoherence, setQubitCoherence] = useState(99.4);
  const [appLinks, setAppLinks] = useState([
    { id: 'meta-ar', name: 'Meta AR Glasses Hudlink', status: 'LINKED', latency: '1.2ms', target: 'Ray-Ban Display OS' },
    { id: 'goog-xr', name: 'Google XR Spatial Matrix', status: 'LINKED', latency: '2.1ms', target: 'Android XR Engine' },
    { id: 'spacex-nav', name: 'SpaceX Starlink Constellation', status: 'ALIGNED', latency: '0.8ms', target: 'LEO Mesh v3' },
    { id: 'q-bus', name: 'Quantum Cross-App Hyper-IPC', status: 'OVERRIDE', latency: '0.04ms', target: 'Direct Entangled Ring' }
  ]);
  const [telemetryData, setTelemetryData] = useState([
    { velocity: 7620, time: 'T-5' },
    { velocity: 7645, time: 'T-4' },
    { velocity: 7610, time: 'T-3' },
    { velocity: 7680, time: 'T-2' },
    { velocity: 7705, time: 'T-1' },
    { velocity: 7730, time: 'NOW' }
  ]);

  const terminalEndRef = useRef(null);

  // Auto-scroll terminal
  useEffect(() => {
    terminalEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [terminalLogs]);

  // Telemetry stream generator
  useEffect(() => {
    const interval = setInterval(() => {
      setTelemetryData(prev => {
        const last = prev[prev.length - 1];
        const delta = (Math.random() - 0.48) * 45;
        const nextVelocity = Math.max(7350, Math.min(7850, last.velocity + delta));
        return [...prev.slice(1), { velocity: nextVelocity, time: new Date().toLocaleTimeString().slice(3, 8) }];
      });

      // Micro coherence fluctuation
      setQubitCoherence(prev => +(98.5 + Math.random() * 1.4).toFixed(2));
    }, 2400);

    return () => clearInterval(interval);
  }, []);

  // Background random system events
  useEffect(() => {
    const logInterval = setInterval(() => {
      const pick = RANDOM_LOGS[Math.floor(Math.random() * RANDOM_LOGS.length)];
      setTerminalLogs(prev => [...prev.slice(-30), pick]);
    }, 5500);

    return () => clearInterval(logInterval);
  }, []);

  // Legacy purge simulation
  const handlePurgeLegacy = () => {
    if (isPurgingLegacy) return;
    setIsPurgingLegacy(true);
    setPurgeProgress(10);
    setTerminalLogs(prev => [
      ...prev,
      ">>> EXEC: INITIATING COMPLETE PURGE OF LEGACY MICROSOFT & LINUX SUB-KERNELS...",
      "> UNMOUNTING SYSTEMD, SYSTEM32, AND POSIX IPC PIPES...",
      "> ACTIVATING ATOMIC ENTANGLED MEMORY FABRIC..."
    ]);

    let step = 10;
    const purgeTimer = setInterval(() => {
      step += 18;
      if (step >= 100) {
        setPurgeProgress(100);
        clearInterval(purgeTimer);
        setIsPurgingLegacy(false);
        setTerminalLogs(prev => [
          ...prev,
          "✔ [PURGE COMPLETE]: 0% Legacy Code remaining. Host runs purely on Quantum Nexus Hyper-Bus.",
          "✔ [LINK COMPLETE]: Meta AR, Google XR, and SpaceX Starlink interconnected across Quantum IPC."
        ]);
        setAppLinks(prev => prev.map(item => ({ ...item, status: 'QUANTUM NATIVE', latency: '<0.1ms' })));
      } else {
        setPurgeProgress(step);
      }
    }, 450);
  };

  const handleCommandSubmit = (e) => {
    e.preventDefault();
    if (!commandInput.trim()) return;

    const cmd = commandInput.trim();
    setTerminalLogs(prev => [...prev, `$ ${cmd}`]);
    const lower = cmd.toLowerCase();

    if (lower === 'help') {
      setTerminalLogs(prev => [
        ...prev,
        "Available Quantum Commands:",
        "  sync-meta     - Re-calibrate Meta AR Waveguides",
        "  sync-xr       - Align Google XR Spatial Meshes",
        "  spacex-boost  - Retarget SpaceX Polar Orbit Satellites",
        "  link-apps     - Build zero-copy Quantum IPC between apps",
        "  purge-legacy  - Eradicate Linux / Microsoft legacy runtimes",
        "  clear         - Clear terminal buffer",
        "  status        - Print overall quantum bus telemetry"
      ]);
    } else if (lower === 'clear') {
      setTerminalLogs([]);
    } else if (lower.includes('purge') || lower.includes('ditch')) {
      handlePurgeLegacy();
    } else if (lower.includes('sync-meta') || lower.includes('meta')) {
      setTerminalLogs(prev => [
        ...prev,
        "[META AR]: Ray-Ban optic bridge quantum link established (120 FPS render target synchronised)."
      ]);
    } else if (lower.includes('xr') || lower.includes('google')) {
      setTerminalLogs(prev => [
        ...prev,
        "[GOOGLE XR]: Spatial cloud anchors registered in 6-DoF Quantum coordinate space."
      ]);
    } else if (lower.includes('spacex') || lower.includes('sat')) {
      setTerminalLogs(prev => [
        ...prev,
        "[SPACEX MESH]: Nav routing locked onto Starlink 423 LEO birds. Optical inter-sat link 100 Gbps active."
      ]);
    } else if (lower.includes('link') || lower.includes('apps')) {
      setTerminalLogs(prev => [
        ...prev,
        "[APP BUS]: Replaced Linux D-Bus and Win32 COM with Quantum Memory Registers. Apps are now linked directly!"
      ]);
    } else if (lower === 'status') {
      setTerminalLogs(prev => [
        ...prev,
        `[DIAGNOSTICS]: Coherence: ${qubitCoherence}% | Telemetry: 7712 m/s | Nodes Active: 4/4`
      ]);
    } else {
      setTerminalLogs(prev => [
        ...prev,
        `Unknown command '${cmd}'. Type 'help' to inspect available quantum instructions.`
      ]);
    }

    setCommandInput('');
  };

  return (
    <div className="w-full min-h-screen bg-slate-950 text-slate-100 font-mono p-3 sm:p-6 flex flex-col gap-5 overflow-x-hidden select-none">
      
      {/* TOP HUD BAR */}
      <header className="border border-cyan-500/40 bg-slate-900/80 backdrop-blur-md rounded-xl p-4 flex flex-wrap items-center justify-between gap-4 shadow-[0_0_25px_rgba(6,182,212,0.15)]">
        <div className="flex items-center gap-3">
          <div className="p-2.5 rounded-lg bg-cyan-950/80 border border-cyan-500/50 text-cyan-400 shadow-[0_0_12px_rgba(34,211,238,0.4)]">
            <Zap className="w-6 h-6 animate-pulse" />
          </div>
          <div>
            <div className="flex items-center gap-2">
              <h1 className="text-xl sm:text-2xl font-black tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-sky-300 to-indigo-400">
                QUANTUM NEXUS OS
              </h1>
              <span className="text-[10px] uppercase font-bold tracking-wider px-2 py-0.5 rounded bg-cyan-900/40 text-cyan-300 border border-cyan-700/60">
                v4.9-ENTANGLED
              </span>
            </div>
            <p className="text-xs text-slate-400 font-sans tracking-wide">
              Cross-Platform Quantum Hyper-Bridge // Meta AR • Google XR • SpaceX SatNet
            </p>
          </div>
        </div>

        {/* Global Indicators & Quick Actions */}
        <div className="flex items-center flex-wrap gap-2.5">
          <div className="bg-slate-950/80 border border-slate-800 rounded-lg px-3 py-1.5 flex items-center gap-2 text-xs">
            <span className="w-2 h-2 rounded-full bg-emerald-400 animate-ping"></span>
            <span className="text-slate-400">Q-COHERENCE:</span>
            <span className="font-bold text-cyan-300">{qubitCoherence}%</span>
          </div>

          <button
            onClick={handlePurgeLegacy}
            disabled={isPurgingLegacy}
            className={`px-3.5 py-2 rounded-lg text-xs font-bold tracking-wider flex items-center gap-2 border transition-all ${
              isPurgingLegacy
                ? 'bg-amber-950/60 border-amber-600/80 text-amber-300 cursor-wait'
                : 'bg-rose-950/50 hover:bg-rose-900/60 border-rose-500/60 text-rose-300 hover:shadow-[0_0_15px_rgba(244,63,94,0.4)] active:scale-95'
            }`}
          >
            <Trash2 className="w-4 h-4" />
            {isPurgingLegacy ? `PURGING LEGACY OS (${purgeProgress}%)` : 'PURGE LINUX & WIN32'}
          </button>
        </div>
      </header>

      {/* MAIN 3-COLUMN RESPONSIVE GRID */}
      <main className="grid grid-cols-1 lg:grid-cols-12 gap-5 flex-grow">
        
        {/* LEFT COLUMN: HARDWARE & APP INTER-CONNECTS (4 COLS) */}
        <section className="lg:col-span-4 flex flex-col gap-4">
          
          {/* Target Integration Bridges */}
          <div className="bg-slate-900/60 border border-cyan-800/50 rounded-xl p-4 backdrop-blur-sm flex flex-col gap-3">
            <div className="flex items-center justify-between border-b border-slate-800 pb-2">
              <span className="text-xs uppercase font-bold tracking-wider text-cyan-400 flex items-center gap-2">
                <Network className="w-4 h-4" /> Active Bridge Links
              </span>
              <span className="text-[10px] text-slate-400 bg-slate-800 px-2 py-0.5 rounded">4 ONLINE</span>
            </div>

            <div className="flex flex-col gap-2.5">
              {appLinks.map((link) => (
                <div key={link.id} className="bg-slate-950/70 border border-slate-800 hover:border-cyan-700/60 rounded-lg p-3 transition-colors">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      {link.id === 'meta-ar' && <Glasses className="w-4 h-4 text-sky-400" />}
                      {link.id === 'goog-xr' && <Globe className="w-4 h-4 text-emerald-400" />}
                      {link.id === 'spacex-nav' && <Satellite className="w-4 h-4 text-cyan-400" />}
                      {link.id === 'q-bus' && <Layers className="w-4 h-4 text-purple-400" />}
                      <span className="text-xs font-bold text-slate-200">{link.name}</span>
                    </div>
                    <span className="text-[10px] font-bold px-1.5 py-0.5 rounded bg-emerald-950 text-emerald-300 border border-emerald-800">
                      {link.status}
                    </span>
                  </div>
                  <div className="flex items-center justify-between text-[11px] text-slate-400 mt-2">
                    <span>Target: <span className="text-slate-300">{link.target}</span></span>
                    <span className="font-mono text-cyan-400">{link.latency}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Replacement OS App Bus Linker */}
          <div className="bg-slate-900/60 border border-purple-800/40 rounded-xl p-4 backdrop-blur-sm flex flex-col gap-3">
            <h3 className="text-xs uppercase font-bold tracking-wider text-purple-300 flex items-center gap-2">
              <Layers className="w-4 h-4 text-purple-400" />
              Quantum App IPC Bus (Replaces Linux & NT)
            </h3>
            <p className="text-xs text-slate-400 leading-relaxed font-sans">
              Traditional OS kernels isolate apps behind legacy system calls and POSIX wrappers. 
              Quantum Nexus OS routes memory state across entangled hardware rings, giving Meta Glasses, 
              Google XR head-mesh, and SpaceX orbital navigation zero-latency shared memory.
            </p>
            <div className="grid grid-cols-2 gap-2 mt-1">
              <div className="bg-slate-950/80 p-2 rounded border border-purple-900/40">
                <span className="text-[10px] text-purple-400 block font-bold">LEGACY PIPES</span>
                <span className="text-sm font-bold text-rose-400 line-through">POSIX / WIN32</span>
              </div>
              <div className="bg-slate-950/80 p-2 rounded border border-purple-900/40">
                <span className="text-[10px] text-purple-400 block font-bold">QUANTUM FABRIC</span>
                <span className="text-sm font-bold text-emerald-400">ENTANGLED IPC</span>
              </div>
            </div>
          </div>

        </section>

        {/* MIDDLE COLUMN: QUANTUM CORE & SPACEX ORBITAL TELEMETRY (4 COLS) */}
        <section className="lg:col-span-4 flex flex-col gap-4">
          
          {/* Quantum Visualizer */}
          <div className="bg-slate-900/60 border border-cyan-500/30 rounded-xl p-5 backdrop-blur-sm relative overflow-hidden flex flex-col items-center justify-center min-h-[260px] shadow-[0_0_30px_rgba(34,211,238,0.05)]">
            <div className="absolute top-3 left-3 text-[10px] font-bold text-cyan-500 tracking-widest uppercase">
              ENTANGLEMENT CORE STATUS
            </div>
            
            <div className="relative w-44 h-44 my-4 flex items-center justify-center">
              {/* Outer Counter-Rotating Ring */}
              <div className="absolute inset-0 border-[2px] border-dashed border-cyan-500 rounded-full animate-[spin_10s_linear_infinite] opacity-60"></div>
              {/* Middle Ring */}
              <div className="absolute inset-3 border-2 border-transparent border-t-purple-500 border-b-purple-400 rounded-full animate-[spin_6s_linear_infinite_reverse] opacity-70"></div>
              {/* Inner Pulsing Ring */}
              <div className="absolute inset-7 border border-cyan-300 rounded-full animate-ping opacity-30"></div>
              <div className="absolute inset-9 border border-cyan-400/80 rounded-full flex items-center justify-center bg-cyan-950/40 shadow-[0_0_20px_rgba(34,211,238,0.4)]">
                <Cpu className="w-10 h-10 text-cyan-300" />
              </div>
              
              {/* Floating Quantum Beads */}
              <div className="absolute w-2.5 h-2.5 bg-purple-400 rounded-full top-0 left-1/2 -translate-x-1/2 shadow-[0_0_8px_#c084fc]"></div>
              <div className="absolute w-2.5 h-2.5 bg-cyan-400 rounded-full bottom-0 left-1/2 -translate-x-1/2 shadow-[0_0_8px_#22d3ee]"></div>
            </div>

            <div className="text-center">
              <span className="text-lg font-black text-cyan-300 tracking-widest drop-shadow-[0_0_10px_rgba(34,211,238,0.6)]">
                {isPurgingLegacy ? 'FLUSHING LEGACY REGS' : 'QUANTUM SYNC ACTIVE'}
              </span>
              <p className="text-[11px] text-slate-400 mt-0.5">
                Sub-nanosecond sync across 4 global devices
              </p>
            </div>
          </div>

          {/* SpaceX Sat Nav Mesh */}
          <div className="bg-slate-900/60 border border-cyan-800/50 rounded-xl p-4 backdrop-blur-sm flex flex-col flex-grow">
            <div className="flex items-center justify-between mb-2">
              <h3 className="text-xs font-bold text-cyan-300 flex items-center gap-2">
                <Satellite className="w-4 h-4 text-cyan-400" />
                SPACEX SAT-NAV // ORBITAL TELEMETRY
              </h3>
              <span className="text-[10px] font-mono px-2 py-0.5 rounded bg-cyan-950 text-cyan-300 border border-cyan-800">
                LEO MESH: LOCK
              </span>
            </div>

            <div className="w-full h-36 bg-slate-950/80 rounded-lg p-2 border border-slate-800 overflow-hidden">
              <TelemetryChart data={telemetryData} />
            </div>

            <div className="flex justify-between items-center text-[10px] text-slate-400 mt-2 font-mono">
              <span>BANDWIDTH: 1.2 PB/s DIRECT ENTANGLED</span>
              <span className="text-cyan-400 font-bold">POLAR TRAJECTORY 88.4°</span>
            </div>
          </div>

        </section>

        {/* RIGHT COLUMN: TERMINAL & COMMAND CENTER (4 COLS) */}
        <section className="lg:col-span-4 flex flex-col gap-4">
          
          {/* Interactive Shell / Terminal */}
          <div className="bg-slate-900/80 border border-slate-800 rounded-xl p-4 backdrop-blur-sm flex flex-col flex-grow min-h-[380px]">
            <div className="flex items-center justify-between pb-2 border-b border-slate-800 text-xs">
              <span className="font-bold text-cyan-400 flex items-center gap-1.5">
                <Terminal className="w-4 h-4" /> QUANTUM ROOT SHELL
              </span>
              <button 
                onClick={() => setTerminalLogs([])}
                className="text-[10px] text-slate-500 hover:text-slate-300"
              >
                Clear
              </button>
            </div>

            {/* Terminal output */}
            <div className="flex-grow overflow-y-auto max-h-[320px] my-3 pr-1 text-[11px] font-mono space-y-1.5">
              {terminalLogs.map((log, idx) => (
                <div 
                  key={idx} 
                  className={`leading-relaxed break-all ${
                    log.startsWith('$') 
                      ? 'text-cyan-300 font-bold' 
                      : log.startsWith('✔') 
                      ? 'text-emerald-400' 
                      : log.startsWith('>>>')
                      ? 'text-amber-300 font-bold'
                      : 'text-slate-300'
                  }`}
                >
                  {log}
                </div>
              ))}
              <div ref={terminalEndRef} />
            </div>

            {/* Interactive command input */}
            <form onSubmit={handleCommandSubmit} className="pt-2 border-t border-slate-800 flex items-center gap-2">
              <span className="text-cyan-400 font-bold text-xs">$</span>
              <input
                type="text"
                value={commandInput}
                onChange={(e) => setCommandInput(e.target.value)}
                placeholder="type 'help', 'purge-legacy', 'sync-meta'..."
                className="w-full bg-slate-950 border border-slate-800 focus:border-cyan-500 rounded px-2.5 py-1.5 text-xs text-slate-100 placeholder:text-slate-600 focus:outline-none font-mono"
              />
              <button
                type="submit"
                className="px-3 py-1.5 bg-cyan-600 hover:bg-cyan-500 text-slate-950 font-bold text-xs rounded transition-colors"
              >
                EXEC
              </button>
            </form>
          </div>

          {/* Quick Trigger Chips */}
          <div className="flex items-center flex-wrap gap-2">
            {[
              { label: 'Sync Meta AR', cmd: 'sync-meta' },
              { label: 'Sync Google XR', cmd: 'sync-xr' },
              { label: 'SpaceX Link', cmd: 'spacex-boost' },
              { label: 'Link Apps', cmd: 'link-apps' }
            ].map(btn => (
              <button
                key={btn.cmd}
                onClick={() => {
                  setCommandInput(btn.cmd);
                }}
                className="text-[11px] bg-slate-900 hover:bg-slate-800 border border-slate-700 hover:border-cyan-500/50 text-cyan-300 px-2.5 py-1 rounded transition-colors"
              >
                +{btn.label}
              </button>
            ))}
          </div>

        </section>

      </main>

      {/* FOOTER BAR */}
      <footer className="border-t border-slate-900 pt-3 flex flex-wrap items-center justify-between text-xs text-slate-500 font-mono">
        <div className="flex items-center gap-4">
          <span>HOST: QUANTUM-ENTANGLED FABRIC</span>
          <span>LEGACY KERNELS: PURGED</span>
        </div>
        <div>
          <span>SPACEX / META / GOOGLE XR CONNECTORS OK</span>
        </div>
      </footer>

    </div>
  );
}