import { FormEvent } from 'react';
import { Terminal, Crosshair, Code, ShieldAlert, Wifi, Cpu, Eye, LockKeyhole, FolderLock, Database, MapPin, ChevronRight, Share, TriangleAlert, Globe, Share2, Instagram } from 'lucide-react';

const DICT: Record<string, any> = {
  pt: {
    back: '/cd root_dir',
    heroTitle: 'O ZERO-DAY.LOG',
    heroDesc: 'Registros restritos distribuídos sobre infosec, darknets e vulnerabilidades catastróficas L0.',
    btnDecrypt: 'DECRYPT_FILE()',
    btnTerminal: 'ACCESS_TERM()',
    feedTitle: 'SYS.LOGS_STREAM',
    subscribeText: 'Canal de transmissão de exploits prioridade vermelha.',
    subscribeBtn: 'INIT_HANDSHAKE',
    sidebarAd: 'S.P.O.N.S.O.R',
    adDesc: 'VPN DESCENTRALIZADA OFUSCADA',
    statusMonitor: 'SYS_NODE_MONITOR',
    articles: [
      { id: '1', tag: 'ZERO-DAY', title: 'Exploit encontrado na rede principal Ethereum de custódia', excerpt: 'Nossa equipe documentou um exploit RCE crítico na infraestrutura nativa.', date: '14:02:00', author: 'SysAdmin_01', sev: 'CRITICAL' },
      { id: '2', tag: 'CRYPTO', title: 'Criptografia Quântica: A quebra absoluta', excerpt: 'Algoritmos de Shor não são mais teóricos. Atualize seus bancos com urgência antes do Q4.', date: '09:15:33', author: 'DrH4ck', sev: 'HIGH' },
      { id: '3', tag: 'HARDWARE', title: 'Engenharia Reversa no SDK de Drones de Entrega Aérea', excerpt: 'Anatomia do firmware que controla a nova frota autônoma. O bypass é letalmente simples.', date: '22:40:11', author: 'R00T_ME', sev: 'MED' },
      { id: '4', tag: 'WEB3', title: 'Como carteiras frias vazam seeds vitais via voltagem', excerpt: 'Chips tidos como seguros falham sob injeção de pólos extremos térmicos na placa principal.', date: '03:10:00', author: 'Ghost', sev: 'CRITICAL' },
      { id: '5', tag: 'A.I.', title: 'Envenenamento de LLMs por injeção estocástica reversa', excerpt: 'Hackeando os bancos de treinamento massivos através de padrões de grid em dados de satélite.', date: '11:40:22', author: 'Cipher', sev: 'HIGH' },
      { id: '6', tag: 'MALWARE', title: 'Ransomware trava totalmente malhas ferroviárias do leste', excerpt: 'Eles pediram Monero limpo, mas a chave de desencriptação queimou.', date: '16:05:00', author: '0xVoid', sev: 'HIGH' },
      { id: '7', tag: 'PRIVACY', title: 'O Fim da rede Tor como conhecemos', excerpt: 'Entidades interceptaram tráfego no source e adquiriram 60% dos nodes finais globais.', date: '08:32:10', author: 'SysAdmin_01', sev: 'CRITICAL' },
      { id: '8', tag: 'NETWORK', title: 'DNS over HTTPS está vazando metadata de proxy', excerpt: 'Você não está invisível. A estrutura central reporta dados indiretos se mal configurada.', date: '01:10:05', author: 'R00T_ME', sev: 'LOW' },
    ]
  },
  en: {
    back: '/cd root_dir',
    heroTitle: 'THE ZERO-DAY.LOG',
    heroDesc: 'Restricted distributed logs on infosec, darknets, and catastrophic L0 vulnerabilities.',
    btnDecrypt: 'DECRYPT_FILE()',
    btnTerminal: 'ACCESS_TERM()',
    feedTitle: 'SYS.LOGS_STREAM',
    subscribeText: 'Red priority exploit transmission channel.',
    subscribeBtn: 'INIT_HANDSHAKE',
    sidebarAd: 'S.P.O.N.S.O.R',
    adDesc: 'OBFUSCATED DECENTRALIZED VPN',
    statusMonitor: 'SYS_NODE_MONITOR',
    articles: [
      { id: '1', tag: 'ZERO-DAY', title: 'Zero-Day Exploit found on core custodial network', excerpt: 'Our analytical team documented a critical RCE exploit within standard core architecture.', date: '14:02:00', author: 'SysAdmin_01', sev: 'CRITICAL' },
      { id: '2', tag: 'CRYPTO', title: 'Quantum Cryptography: The absolute breakage event', excerpt: 'Shor algorithms dropped theoretical constraints. Patch databases rapidly before Q4 starts.', date: '09:15:33', author: 'DrH4ck', sev: 'HIGH' },
      { id: '3', tag: 'HARDWARE', title: 'Reverse Engineering autonomous Aerial Drone SDKs', excerpt: 'Firmware anatomy bypass for commercial delivery fleets. The code breach is lethally basic.', date: '22:40:11', author: 'R00T_ME', sev: 'MED' },
      { id: '4', tag: 'WEB3', title: 'How premium cold wallets leak seeds via voltage pinging', excerpt: 'Secure chips fail hard when injected with extreme thermal polls straight onto the mainboard.', date: '03:10:00', author: 'Ghost', sev: 'CRITICAL' },
      { id: '5', tag: 'A.I.', title: 'Poisoning core LLMs via reverse stochastic injections', excerpt: 'Hacking massive training banks by tricking satellite grid rendering artifacts constantly.', date: '11:40:22', author: 'Cipher', sev: 'HIGH' },
      { id: '6', title: 'Industrial Ransomware entirely halts eastern rail grids', tag: 'MALWARE', excerpt: 'Ransom requested in clean Monero, but the global decryption array burned to ash.', date: '16:05:00', author: '0xVoid', sev: 'HIGH' },
      { id: '7', tag: 'PRIVACY', title: 'The total collapse of the Tor network as known', excerpt: 'Black entities intercepted core traffic routing and purchased 60% of all exit nodes.', date: '08:32:10', author: 'SysAdmin_01', sev: 'CRITICAL' },
      { id: '8', tag: 'NETWORK', title: 'Your DNS over HTTPS setup is leaking proxy data logs', excerpt: 'Invisibility is broken. Central scaffolding inherently leaks telemetry if left out of bounds.', date: '01:10:05', author: 'R00T_ME', sev: 'LOW' }
    ]
  },
  es: {
    back: '/cd root_dir',
    heroTitle: 'EL ZERO-DAY.LOG',
    heroDesc: 'Registros distribuidos restringidos sobre infosec y vulnerabilidades catastróficas.',
    btnDecrypt: 'DESCIFRAR_ARCHIVO()',
    btnTerminal: 'ACCESO_TERM()',
    feedTitle: 'FLUJO.SYS_LOGS',
    subscribeText: 'Canal de distribución de exploits, prioridad roja.',
    subscribeBtn: 'INICIAR_HANDSHAKE',
    sidebarAd: 'P.A.T.R.O.C.I.N.A.D.O.R',
    adDesc: 'VPN DESCENTRALIZADA OFUSCADA',
    statusMonitor: 'MONITOR_DE_NODOS_SYS',
    articles: [
      { id: '1', tag: 'ZERO-DAY', title: 'Exploit crítico en la red principal de custodia', excerpt: 'El equipo documentó un exploit RCE mortal en la infraestructura estándar nativa.', date: '14:02:00', author: 'SysAdmin_01', sev: 'CRITICAL' },
      { id: '2', tag: 'CRYPTO', title: 'Criptografía Cuántica: La ruptura absoluta inminente', excerpt: 'Los algoritmos de Shor ya no son una simple teoría. Se requiere un parcheo inmediato global.', date: '09:15:33', author: 'DrH4ck', sev: 'HIGH' },
      { id: '3', tag: 'HARDWARE', title: 'Ingeniería Inversa letal a Drones comerciales', excerpt: 'El bypass de la anatomía del firmware muestra fallas operativas extremas en el SDK.', date: '22:40:11', author: 'R00T_ME', sev: 'MED' },
      { id: '4', tag: 'WEB3', title: 'Wallets físicas filtrando frases semilla en tensión alta', excerpt: 'Los micro chips hiper seguros fallaron ante ataques eléctricos violentos a placa madre.', date: '03:10:00', author: 'Ghost', sev: 'CRITICAL' },
      { id: '5', tag: 'A.I.', title: 'Corrompiendo LLMs mediante ataques estocásticos', excerpt: 'Dañando bases de datos de entrenamiento vía inyecciones matemáticas satelitales.', date: '11:40:22', author: 'Cipher', sev: 'HIGH' },
      { id: '6', tag: 'MALWARE', title: 'Ransomware severo paraliza vías férreas de logística', excerpt: 'Miles de millones pedidos en Monero. La llave maestra de descifrado simplemente se borró.', date: '16:05:00', author: '0xVoid', sev: 'HIGH' },
      { id: '7', tag: 'PRIVACY', title: 'El fin inevitable de anonimato total en red Tor', excerpt: 'Entes han adquirido el control total subyacente interceptando todos los nodos finales.', date: '08:32:10', author: 'SysAdmin_01', sev: 'CRITICAL' },
      { id: '8', tag: 'NETWORK', title: 'Ajuste de DNS over HTTPS filtra meta datos severos', excerpt: 'No eres invisible en internet. La estructura troncal reporta huellas de IP y tracking.', date: '01:10:05', author: 'R00T_ME', sev: 'LOW' },
    ]
  }
};

export default function CyberTheme({ posts = [], activeView = 'home', currentArticle, children }: { posts?: any[], activeView?: 'home' | 'article', currentArticle?: any, children?: React.ReactNode }) {
  const lang = 'pt';
  const ui = DICT[lang] || DICT['pt'];

  // Mapeia posts reais do Supabase (gerados pela IA) ou usa o Fallback padrão
  const articlesToRender = posts && posts.length > 0 ? posts.map((p, i) => ({
    id: p.slug || p.id,
    tag: 'SYSTEM',
    title: p.data?.title || p.title,
    excerpt: p.data?.excerpt || p.excerpt,
    date: p.data?.date ? new Date(p.data.date).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit', second: '2-digit' }) : '00:00:00',
    author: p.data?.author || 'AI_NODE',
    sev: i % 2 === 0 ? 'CRITICAL' : 'HIGH',
    content: p.body || p.content
  })) : ui.articles;
  
  // Se houver um artigo atual passado por rota dinâmica
  const article = currentArticle ? {
    id: currentArticle.slug,
    tag: 'SYSTEM',
    title: currentArticle.data?.title,
    excerpt: currentArticle.data?.excerpt,
    date: currentArticle.data?.date ? new Date(currentArticle.data.date).toLocaleTimeString('pt-BR') : '00:00:00',
    author: currentArticle.data?.author || 'AI_NODE',
    sev: 'CRITICAL'
  } : null;

  const handleSimulatedAction = (e: React.MouseEvent | FormEvent, msg: string) => {
    e.preventDefault();
    window.alert(`[SYS_PROMPT] ${msg}`);
  };

  const severityColor = (sev: string) => {
    switch (sev) {
       case 'CRITICAL': return 'text-red-500 border-red-500/50 bg-red-500/10';
       case 'HIGH': return 'text-orange-500 border-orange-500/50 bg-orange-500/10';
       case 'MED': return 'text-yellow-500 border-yellow-500/50 bg-yellow-500/10';
       default: return 'text-[#00ff9d] border-[#00ff9d]/50 bg-[#00ff9d]/10';
    }
  };

  return (
    <div className="cyber-scroll-container bg-[#020202] text-[#00ff9d] min-h-screen font-['Space_Mono'] overflow-hidden flex flex-col selection:bg-[#00ff9d] selection:text-black shadow-[inset_0_0_150px_rgba(0,255,157,0.03)]">
      
      {/* Triple-Column Application Dashboard Shell */}
      
      {/* Global Application Header */}
      <header className="h-14 border-b border-[#00ff9d]/20 bg-[#020202] flex items-center justify-between px-4 z-40 relative">
        <div className="absolute top-0 right-0 left-0 h-[1px] bg-gradient-to-r from-transparent via-[#00ff9d]/50 to-transparent opacity-50"></div>
        <a href="/" className="flex items-center gap-4 cursor-pointer">
          <div className="bg-[#00ff9d] text-black w-8 h-8 flex items-center justify-center font-black">
             <Terminal className="w-5 h-5" />
          </div>
          <span className="font-bold tracking-[0.2em] uppercase hidden sm:block">CYBER_SYS_CORE v9.4</span>
        </a>
        <div className="flex items-center gap-6 text-xs text-[#00ff9d]/50 font-bold uppercase tracking-widest">
           <span className="hidden md:flex items-center gap-2 animate-pulse"><Wifi className="w-3 h-3 text-red-500"/> IP MASKED</span>
           <span className="hidden md:inline">UPTIME: 99.42%</span>
           <a href="/login" className="border border-[#00ff9d]/30 hover:bg-[#00ff9d] hover:text-black transition-colors px-4 py-1.5 flex items-center gap-2"><LockKeyhole className="w-3 h-3"/> AUTH</a>
        </div>
      </header>

      {/* Main 3 Column Flex Layer */}
      <div className="flex flex-1 overflow-hidden">
         
         {/* LEFT COLUMN: NAVIGATION TREE (15-20%) hidden on mobile */}
         <aside className="w-64 border-r border-[#00ff9d]/20 hidden lg:flex flex-col bg-[#050505] overflow-y-auto">
            <div className="p-4 border-b border-[#00ff9d]/20 font-bold text-[10px] tracking-widest uppercase text-[#00ff9d]/50">
               SYSTEM_DIRECTORIES
            </div>
            <nav className="p-4 flex flex-col gap-1 text-xs">
               <a href="/" className="flex items-center gap-2 text-white font-bold p-2 bg-[#00ff9d]/10 border border-[#00ff9d]/30 cursor-pointer"><FolderLock className="w-4 h-4 text-[#00ff9d]"/> /root</a>
               <div className="ml-6 flex items-center gap-2 text-[#00ff9d]/70 p-2 cursor-pointer hover:bg-white/5" onClick={(e) => handleSimulatedAction(e, 'Nav Node')}><span className="text-[#00ff9d]/30 text-xs">|_</span> exploits/</div>
               <div className="ml-6 flex items-center gap-2 text-[#00ff9d]/70 p-2 cursor-pointer hover:bg-white/5" onClick={(e) => handleSimulatedAction(e, 'Nav Node')}><span className="text-[#00ff9d]/30 text-xs">|_</span> payloads/</div>
               <div className="ml-6 flex items-center gap-2 text-[#00ff9d]/70 p-2 cursor-pointer hover:bg-white/5" onClick={(e) => handleSimulatedAction(e, 'Nav Node')}><span className="text-[#00ff9d]/30 text-xs">|_</span> hardware_schematics/</div>
               <div className="flex items-center gap-2 text-white font-bold p-2 hover:bg-white/5 cursor-pointer mt-4" onClick={(e) => handleSimulatedAction(e, 'Nav Node')}><Database className="w-4 h-4 text-[#00ff9d]"/> /archives_locked</div>
               <div className="flex items-center gap-2 text-white font-bold p-2 hover:bg-white/5 cursor-pointer" onClick={(e) => handleSimulatedAction(e, 'Nav Node')}><Code className="w-4 h-4 text-[#00ff9d]"/> /tools_bin</div>
            </nav>
            {/* Ad Widget in Tree */}
            <div className="mt-auto p-4 m-4 border border-red-500/30 bg-red-500/5 cursor-pointer group" onClick={(e) => handleSimulatedAction(e, 'Banner Sponsor Click')}>
               <span className="text-[10px] text-red-500 font-bold tracking-widest uppercase block mb-2 opacity-50">{ui.sidebarAd} // TXT</span>
               <h4 className="text-sm font-bold text-red-400 group-hover:text-white transition-colors">{ui.adDesc}</h4>
               <span className="text-[9px] uppercase tracking-widest text-[#00ff9d]/50 block mt-2">&gt; Run secure.sh</span>
            </div>
         </aside>

         {/* CENTER COLUMN: MAIN FEED (60%) scrollable */}
         <main className="flex-1 bg-[#020202] relative overflow-y-auto w-full custom-cyber-scrollbar">
            <div className="max-w-[1000px] mx-auto p-4 sm:p-8">
               
               {activeView === 'home' ? (
                 <>
                   {/* Terminal Header Banner */}
                   <div className="border border-[#00ff9d]/40 bg-[#00ff9d]/5 p-6 sm:p-10 relative overflow-hidden mb-10">
                      <div className="absolute -right-20 -bottom-20 opacity-10"><Terminal className="w-96 h-96"/></div>
                      <span className="bg-[#00ff9d] text-black px-2 py-0.5 text-[10px] font-bold uppercase tracking-widest block w-fit mb-6">GLOBAL_BROADCAST</span>
                      <h1 className="text-3xl sm:text-5xl font-black mb-4 uppercase tracking-tighter text-white drop-shadow-[0_0_10px_rgba(0,255,157,0.5)]">{ui.heroTitle}</h1>
                      <p className="text-[#00ff9d]/70 text-sm max-w-lg mb-8 leading-relaxed relative z-10">{ui.heroDesc}</p>
                      <div className="flex gap-4 relative z-10">
                        <a href={`/${articlesToRender[0]?.id}`} className="bg-[#00ff9d] text-black px-6 py-2.5 font-bold text-[11px] tracking-widest hover:bg-white transition-colors uppercase block">{ui.btnDecrypt}</a>
                      </div>
                   </div>

                   {/* Dense Log Feed */}
                   <div>
                     <h3 className="text-sm font-black uppercase tracking-[0.2em] mb-6 flex items-center gap-3 border-b border-[#00ff9d]/20 pb-4">
                       <Terminal className="w-5 h-5"/> {ui.feedTitle}
                     </h3>

                     <div className="flex flex-col border-l border-[#00ff9d]/20 ml-2">
                        {articlesToRender.map((art: any, i: number) => (
                           <a href={`/${art.id}`} key={art.id} className="block group cursor-pointer">
                              <article className="relative pl-6 sm:pl-10 pb-10 last:pb-0">
                                 {/* Timeline Node */}
                                 <div className="absolute left-[-5px] top-1 w-[9px] h-[9px] bg-[#020202] border-2 border-[#00ff9d] rounded-full group-hover:bg-[#00ff9d] group-hover:shadow-[0_0_10px_rgba(0,255,157,1)] transition-all"></div>
                                 
                                 <div className="flex flex-wrap items-center gap-3 text-[10px] uppercase font-bold tracking-widest mb-3">
                                    <span className="text-[#00ff9d]/50">{art.date}</span>
                                    <span className="text-[#00ff9d]/20">///</span>
                                    <span className="text-white bg-[#00ff9d]/20 px-2 py-0.5 border border-[#00ff9d]/30">{art.tag}</span>
                                    <span className={`px-2 py-0.5 border ${severityColor(art.sev)}`}>SEV: {art.sev}</span>
                                 </div>
                                 
                                 <h2 className="text-xl sm:text-2xl font-bold text-white mb-2 leading-tight group-hover:text-[#00ff9d] transition-colors">{art.title}</h2>
                                 <p className="text-sm text-[#00ff9d]/60 mb-4">{art.excerpt}</p>
                                 
                                 <div className="text-[10px] font-mono opacity-0 group-hover:opacity-100 transition-opacity text-[#00ff9d]">
                                    [EXECUTE] grep "full_log" /sys/logs/id_{art.id}
                                 </div>
                              </article>
                           </a>
                        ))}
                     </div>
                   </div>
                 </>
               ) : (
                  /* Article View inside Center Column */
                 <article>
                    <a href="/" className="mb-10 inline-block text-[10px] font-bold tracking-widest uppercase border border-[#00ff9d]/30 bg-[#00ff9d]/5 px-4 py-2 hover:bg-[#00ff9d] hover:text-black transition-colors">
                      {ui.back}
                    </a>
                    
                    <div className="mb-12">
                       <div className="flex flex-wrap gap-4 text-[10px] font-black uppercase tracking-widest mb-4">
                          <span className={`border px-3 py-1 ${severityColor(currentArticle.sev)}`}>SEVERITY: {currentArticle.sev}</span>
                          <span className="border border-[#00ff9d]/30 text-[#00ff9d] bg-[#00ff9d]/5 px-3 py-1">AUTHOR_ID: {currentArticle.author}</span>
                       </div>
                       <h1 className="text-4xl sm:text-5xl font-black text-white leading-tight mb-8 drop-shadow-[0_0_15px_rgba(0,255,157,0.3)]">{currentArticle.title}</h1>
                       
                       <div className="border-t border-[#00ff9d]/20 py-4 flex justify-between tracking-widest text-[10px] font-mono text-[#00ff9d]/50 uppercase">
                          <span>TIMESTAMP: {currentArticle.date}</span>
                          <span className="flex items-center gap-1 cursor-pointer hover:text-white" onClick={(e) => handleSimulatedAction(e, 'Share log via Onion router')}><Share className="w-3 h-3"/> TRANSMIT VIA ONION</span>
                       </div>
                    </div>

                    <div className="prose prose-invert prose-lg max-w-none prose-p:text-[#00ff9d]/80 prose-p:font-['Space_Mono'] prose-p:leading-relaxed prose-headings:font-bold prose-headings:text-white prose-headings:uppercase prose-headings:tracking-widest marker:text-[#00ff9d] prose-img:border prose-img:border-[#00ff9d]/30 prose-img:rounded-none">
                       
                       <div className="bg-[#00ff9d]/5 border-l-4 border-[#00ff9d] p-6 text-xl text-white font-bold leading-normal mb-10">
                         {currentArticle.excerpt}
                       </div>

                       {/* Injecting Ad block into article flow dynamically (always before content) */}
                       <div className="my-10 border border-[#00ff9d]/30 bg-black p-6 flex flex-col items-center justify-center text-center cursor-pointer hover:border-[#00ff9d] transition-colors" onClick={(e) => handleSimulatedAction(e, 'MREC Article Ad')}>
                          <span className="text-[10px] tracking-[0.2em] font-bold text-[#00ff9d]/40 mb-2">{ui.sidebarAd} // MREC SCRIPT</span>
                          <span className="font-mono text-sm border-b border-dashed border-[#00ff9d]/30 pb-1 text-white">SPONSORED_TERMINAL_BLOCK 300x250</span>
                       </div>

                       <div className="text-zinc-300 font-mono leading-relaxed space-y-6 prose prose-invert prose-p:text-zinc-300 prose-headings:text-[#00ff9d] prose-a:text-[#00ff9d] prose-strong:text-white prose-code:text-[#00ff9d] max-w-none">
                          {children}
                       </div>
                    </div>
                 </article>
               )}
               
                <footer className="mt-20 pt-10 border-t border-[#00ff9d]/10 pb-20">
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-10 text-left mb-10">
                    <div>
                      <h4 className="text-white font-bold mb-4 uppercase text-xs tracking-widest">Terminal_Core</h4>
                      <p className="text-zinc-500 text-xs leading-relaxed">Infraestrutura de segurança distribuída para coleta de inteligência em redes abertas.</p>
                    </div>
                    <div>
                      <h4 className="text-white font-bold mb-4 uppercase text-xs tracking-widest">Legal_Stack</h4>
                      <ul className="text-zinc-500 text-xs space-y-2">
                        <li><a href="/privacy" className="hover:text-[#00ff9d]">PRIVACY_POLICY.MD</a></li>
                        <li><a href="/terms" className="hover:text-[#00ff9d]">TERMS_OF_SERVICE.MD</a></li>
                      </ul>
                    </div>
                    <div>
                      <h4 className="text-white font-bold mb-4 uppercase text-xs tracking-widest">Node_Status</h4>
                      <div className="flex items-center gap-2 text-[10px] text-green-500 font-bold">
                        <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                        ALL_SYSTEMS_OPERATIONAL
                      </div>
                    </div>
                  </div>
                  <div className="flex justify-center gap-6 mb-8">
                    <a href="#" className="hover:text-[#00ff9d]"><Globe className="w-5 h-5"/></a>
                    <a href="#" className="hover:text-[#00ff9d]"><Share2 className="w-5 h-5"/></a>
                    <a href="#" className="hover:text-[#00ff9d]"><Instagram className="w-5 h-5"/></a>
                  </div>
                  <div className="text-center font-mono text-[10px] text-[#00ff9d]/40 tracking-widest uppercase">
                    EOF - END OF LOGS TRANSMISSION // {new Date().getFullYear()} // ENCRYPTED_SITE
                  </div>
                </footer>
            </div>
         </main>

         {/* RIGHT COLUMN: STATUS MONITOR & WIDGETS (20-25%) hidden on smaller screens */}
         <aside className="w-72 xl:w-80 border-l border-[#00ff9d]/20 hidden md:flex flex-col bg-[#050505] overflow-y-auto">
            
            {/* Status Monitoring Widget */}
            <div className="p-6 border-b border-[#00ff9d]/20 bg-black relative">
               <h3 className="text-[10px] font-black uppercase tracking-[0.2em] mb-4 flex items-center gap-2 text-[#00ff9d]"><Eye className="w-4 h-4"/> {ui.statusMonitor}</h3>
               <div className="flex flex-col gap-3 font-mono text-[10px]">
                  <div className="flex justify-between items-center"><span className="text-[#00ff9d]/50">MAIN_ROUTER_1</span><span className="text-green-500 font-bold bg-green-500/10 px-2 rounded">OK 11ms</span></div>
                  <div className="flex justify-between items-center"><span className="text-[#00ff9d]/50">SQL_CLUSTER_A</span><span className="text-green-500 font-bold bg-green-500/10 px-2 rounded">OK 42ms</span></div>
                  <div className="flex justify-between items-center"><span className="text-[#00ff9d]/50">PROXY_US_EAST</span><span className="text-red-500 font-bold bg-red-500/10 px-2 rounded animate-pulse">ERR DOWN</span></div>
                  <div className="flex justify-between items-center"><span className="text-[#00ff9d]/50">VAULT_ENCRYPT</span><span className="text-yellow-500 font-bold bg-yellow-500/10 px-2 rounded">WARN 2.1s</span></div>
               </div>
            </div>

            {/* Newsletter Handshake Configurator */}
            <div className="p-6 border-b border-[#00ff9d]/20 flex flex-col gap-4">
               <div className="w-10 h-10 border border-[#00ff9d]/40 flex items-center justify-center bg-[#00ff9d]/10 text-[#00ff9d]"><Crosshair className="w-5 h-5"/></div>
               <h4 className="text-sm font-black uppercase tracking-widest text-white">SYNC DAEMON DB</h4>
               <p className="text-[10px] text-[#00ff9d]/60 leading-relaxed font-mono">{ui.subscribeText}</p>
               <form className="flex flex-col gap-2 mt-2" onSubmit={(e) => handleSimulatedAction(e, 'Secure PGP Transmission Init')}>
                 <input type="text" placeholder="pgp_key_or_email..." className="bg-black border border-[#00ff9d]/40 px-3 py-2 text-xs font-mono text-white outline-none focus:border-[#00ff9d] w-full" required/>
                 <button className="bg-[#00ff9d] text-black font-black text-[10px] tracking-widest px-4 py-2 hover:bg-white uppercase w-full">{ui.subscribeBtn}</button>
               </form>
            </div>

            {/* Ad Banner Vertical Skyscraper Emulator */}
            <div className="flex-1 p-6 flex items-center justify-center bg-[url('https://www.transparenttextures.com/patterns/black-mamba.png')]">
               <div className="w-[160px] h-[400px] bg-red-500/10 border border-red-500/30 flex flex-col items-center justify-center cursor-pointer group hover:bg-red-500/20 transition-colors relative" onClick={(e) => handleSimulatedAction(e, 'Skyscraper Ad Click')}>
                  <ShieldAlert className="w-16 h-16 text-red-500 mb-6 opacity-80 group-hover:scale-110 transition-transform"/>
                  <span className="text-red-500 font-black tracking-[0.2em] text-[10px] uppercase writing-vertical-rl rotate-180 mb-6">{ui.sidebarAd} // NETWORK</span>
                  <span className="text-red-400 font-mono text-[9px] bg-red-500/20 px-2 py-1 absolute bottom-4">160x600 px</span>
               </div>
            </div>

         </aside>

      </div>
      
    </div>
  );
}
