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

// Pure inline SVG icons to eliminate external React instance ($$typeof) conflicts
const Zap = ({ className = "w-6 h-6" }) => (
  <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-6 h-6" }) => (
  <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-6 h-6" }) => (
  <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 Server = ({ className = "w-4 h-4" }) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="2" y="2" width="20" height="8" rx="2" />
    <rect x="2" y="14" width="20" height="8" rx="2" />
    <line x1="6" y1="6" x2="6.01" y2="6" />
    <line x1="6" y1="18" x2="6.01" y2="18" />
  </svg>
);

const ShieldCheck = ({ className = "w-4 h-4" }) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
    <path d="m9 12 2 2 4-4" />
  </svg>
);

const Lock = ({ className = "w-6 h-6" }) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="11" width="18" height="11" rx="2" />
    <path d="M7 11V7a5 5 0 0 1 10 0v4" />
  </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 Code = ({ className = "w-3 h-3" }) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="16 18 22 12 16 6" />
    <polyline points="8 6 2 12 8 18" />
  </svg>
);

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

  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.35" />
            <stop offset="100%" stopColor="#22d3ee" 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" fill="#67e8f9" />
      </svg>
      <div className="absolute top-1 right-2 text-xs font-mono font-bold text-cyan-300 bg-cyan-950/70 border border-cyan-800/80 px-2 py-0.5 rounded backdrop-blur-sm">
        {latest.velocity.toFixed(1)} m/s
      </div>
    </div>
  );
};

// ... existing code ...
const RANDOM_LOGS = [
  "> RECALIBRATING META AR OPTICS OVERRIDE...",
  "> PINGING ORBITAL SATELLITE CX-99...",
  "> GOOGLE XR SPATIAL ANCHOR UPDATED.",
  "> QUANTUM FLUCTUATION DETECTED IN SECTOR 7.",
  "> DEPLOYING MICRO-SATELLITE FIRMWARE PATCH.",
  "> INJECTING NEURAL FEED OVERLAY...",
  "> FIREWALL BLOCKED LEGACY PING REQUEST."
];

export default function App() {
  const [terminalLogs, setTerminalLogs] = useState([]);
// ... existing code ...
        {/* CENTER COLUMN: VISUALIZER & SPACEX */}
        <div className="flex flex-col gap-4">
          
          {/* Quantum Visualizer */}
          <div className="bg-black/40 border border-cyan-500/30 rounded-xl p-5 backdrop-blur-sm relative overflow-hidden shadow-[0_0_30px_rgba(34,211,238,0.05)] flex flex-col items-center justify-center min-h-[300px]">
            <h2 className="absolute top-4 left-4 text-xs font-bold text-cyan-600 tracking-widest">QUANTUM KERNEL VISUALIZER</h2>
            
            <div className="relative w-48 h-48 mt-4 flex items-center justify-center">
              {/* Outer Ring */}
              <div className="absolute inset-0 border-[3px] border-transparent border-t-cyan-500 border-b-cyan-500 rounded-full animate-[spin_8s_linear_infinite] opacity-60"></div>
              {/* Middle Dashed Ring */}
              <div className="absolute inset-4 border-2 border-dashed border-purple-500 rounded-full animate-[spin_12s_linear_infinite_reverse] opacity-50"></div>
              {/* Inner Glowing Ring */}
              <div className="absolute inset-8 border border-cyan-300 rounded-full animate-pulse shadow-[0_0_20px_rgba(34,211,238,0.4)]"></div>
              
              <Cpu className="w-10 h-10 text-cyan-300 z-10" />
              
              {/* Data Particles */}
              <div className="absolute w-2 h-2 bg-purple-400 rounded-full top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 shadow-[0_0_10px_rgba(192,132,252,1)] animate-bounce"></div>
              <div className="absolute w-2 h-2 bg-cyan-400 rounded-full bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 shadow-[0_0_10px_rgba(34,211,238,1)] animate-pulse"></div>
            </div>
            
            <div className="mt-8 text-center">
              <div className="text-2xl font-black text-cyan-400 tracking-widest drop-shadow-[0_0_8px_rgba(34,211,238,0.8)]">
                OPERATIONAL
              </div>
              <div className="text-xs text-cyan-700 mt-1">LEGACY SYSTEMS OVERRIDDEN</div>
            </div>
          </div>

          {/* SpaceX Nav Mesh */}
          <div className="bg-black/40 border border-cyan-800/50 rounded-xl p-5 backdrop-blur-sm relative overflow-hidden flex-grow flex flex-col">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-lg font-bold text-cyan-300 flex items-center gap-2">
                <Satellite className="w-5 h-5 text-cyan-400" />
                SPACEX NAV // ORBITAL MESH
              </h2>
              <span className="px-2 py-1 bg-cyan-950/50 text-cyan-400 text-xs rounded border border-cyan-800">TRACKING</span>
            </div>
            
            <div className="flex-grow w-full h-[150px]">
              <TelemetryChart data={telemetryData} />
            </div>
            <div className="flex justify-between text-xs text-cyan-600 mt-2">
              <span>ORBITAL VELOCITY (m/s)</span>
              <span className="text-cyan-400">LIVE TELEMETRY</span>
            </div>
          </div>

        </div>

        {/* RIGHT COLUMN: RESOURCES & NODES */}
// ... existing code ...