apps/matrix-frontend/src/components/widgets/mini/SecurityWidgets.tsx

import {
  Shield, Lock, Key, Eye, AlertTriangle, AlertCircle, CheckCircle, Skull, Ghost, Siren,
  Radio, Unplug, PlugZap, Crosshair, Binary, Braces, FileCode, Webhook, BrainCircuit,
  Radar, Biohazard, ShieldAlert, ShieldCheck, ShieldOff, ShieldQuestion, KeyRound,
  LockKeyhole, ScanLine, ScanFace, UserX, UserCheck, Network, Router, Laptop, Smartphone,
  FileWarning, FileLock, FileSearch, FolderLock, BadgeCheck, BadgeAlert, Award, Globe,
  Database, Download, Terminal, FileText, Fingerprint, Bug, Mail, Target, ArrowUp, ArrowDown,
  Minus, Box
} from 'lucide-react';

const rand = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min;

export const MiniThreatLevel = () => (
  <div className="h-full flex flex-col items-center justify-center gap-2">
    <div className="relative w-14 h-7 overflow-hidden">
      <div className="absolute inset-0 border-4 border-b-0 rounded-t-full bg-gradient-to-r from-green-500 via-yellow-500 to-red-500 opacity-30" />
      <div className="absolute bottom-0 left-1/2 w-1 h-6 bg-foreground origin-bottom -translate-x-1/2 rotate-[-30deg]" />
    </div>
    <span className="text-[8px] text-green-400 font-mono">LOW THREAT</span>
  </div>
);

export const MiniFirewall = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between text-[8px]">
      <Shield className="w-4 h-4 text-green-400" />
      <span className="text-green-400">ACTIVE</span>
    </div>
    <div className="flex justify-between text-[7px] text-muted-foreground">
      <span>Blocked:</span><span className="text-red-400">1,247</span>
    </div>
    <div className="flex justify-between text-[7px] text-muted-foreground">
      <span>Allowed:</span><span className="text-green-400">45,892</span>
    </div>
  </div>
);

export const MiniAccessLog = () => (
  <div className="h-full flex flex-col gap-0.5 text-[6px] font-mono">
    {[
      { ip: '192.168.1.1', action: 'LOGIN', status: 'ok' },
      { ip: '10.0.0.45', action: 'API_CALL', status: 'ok' },
      { ip: '203.0.113.5', action: 'LOGIN', status: 'fail' },
      { ip: '198.51.100.2', action: 'ACCESS', status: 'ok' },
    ].map((l, i) => (
      <div key={i} className="flex items-center gap-1">
        <span className="text-muted-foreground w-16 truncate">{l.ip}</span>
        <span className="flex-1">{l.action}</span>
        <span className={l.status === 'ok' ? 'text-green-400' : 'text-red-400'}>●</span>
      </div>
    ))}
  </div>
);

export const MiniVulnerabilities = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between">
      <Bug className="w-3 h-3 text-yellow-400" />
      <span className="text-[8px] text-muted-foreground">CVE Scan</span>
    </div>
    <div className="grid grid-cols-3 gap-1 text-center">
      <div className="bg-red-500/20 rounded p-1"><span className="text-[10px] text-red-400 font-bold">2</span><span className="text-[6px] block text-muted-foreground">Critical</span></div>
      <div className="bg-yellow-500/20 rounded p-1"><span className="text-[10px] text-yellow-400 font-bold">5</span><span className="text-[6px] block text-muted-foreground">Medium</span></div>
      <div className="bg-blue-500/20 rounded p-1"><span className="text-[10px] text-blue-400 font-bold">12</span><span className="text-[6px] block text-muted-foreground">Low</span></div>
    </div>
  </div>
);

export const MiniEncryption = () => (
  <div className="h-full flex flex-col items-center justify-center gap-2">
    <div className="relative">
      <Lock className="w-8 h-8 text-primary" />
      <div className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full flex items-center justify-center">
        <CheckCircle className="w-2 h-2 text-white" />
      </div>
    </div>
    <span className="text-[8px] font-mono text-primary">AES-256-GCM</span>
  </div>
);

export const MiniSSLStatus = () => (
  <div className="h-full flex flex-col gap-1 justify-center">
    <div className="flex items-center gap-2">
      <div className="w-2 h-2 bg-green-400 rounded-full" />
      <span className="text-[8px]">SSL/TLS Active</span>
    </div>
    <div className="text-[7px] text-muted-foreground space-y-0.5">
      <div>Cert: Let's Encrypt</div>
      <div>Expires: 89 days</div>
      <div>Protocol: TLS 1.3</div>
    </div>
  </div>
);

export const MiniSOCDashboard = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between text-[8px]">
      <ShieldAlert className="w-4 h-4 text-red-400" />
      <span className="text-red-400 animate-pulse">3 ACTIVE INCIDENTS</span>
    </div>
    <div className="grid grid-cols-3 gap-1 text-center">
      <div className="bg-red-500/20 rounded p-0.5"><span className="text-[9px] text-red-400 font-bold">3</span><span className="text-[5px] block text-muted-foreground">Critical</span></div>
      <div className="bg-yellow-500/20 rounded p-0.5"><span className="text-[9px] text-yellow-400 font-bold">12</span><span className="text-[5px] block text-muted-foreground">Warning</span></div>
      <div className="bg-blue-500/20 rounded p-0.5"><span className="text-[9px] text-blue-400 font-bold">47</span><span className="text-[5px] block text-muted-foreground">Info</span></div>
    </div>
  </div>
);

export const MiniThreatMap = () => (
  <div className="h-full relative bg-secondary/20 rounded overflow-hidden">
    <Globe className="absolute inset-0 m-auto w-10 h-10 text-primary/20" />
    {[...Array(8)].map((_, i) => (
      <div key={i} className="absolute w-1.5 h-1.5 rounded-full bg-red-500 animate-ping"
        style={{ left: `${rand(10, 90)}%`, top: `${rand(10, 90)}%`, animationDelay: `${i * 0.3}s`, animationDuration: '2s' }} />
    ))}
    <div className="absolute bottom-1 left-1 text-[6px] text-red-400">Live Attacks: 847</div>
  </div>
);

export const MiniMalwareDetection = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between">
      <Skull className="w-3 h-3 text-red-400" />
      <span className="text-[7px] text-muted-foreground">Last 24h</span>
    </div>
    {[
      { type: 'Ransomware', count: 3, severity: 'critical' },
      { type: 'Trojan', count: 12, severity: 'high' },
      { type: 'Adware', count: 45, severity: 'low' },
    ].map(m => (
      <div key={m.type} className="flex items-center justify-between text-[6px]">
        <span className="text-muted-foreground">{m.type}</span>
        <span className={m.severity === 'critical' ? 'text-red-400' : m.severity === 'high' ? 'text-orange-400' : 'text-yellow-400'}>{m.count}</span>
      </div>
    ))}
  </div>
);

export const MiniIntrusionDetection = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between text-[8px]">
      <Radar className="w-4 h-4 text-primary animate-spin" style={{ animationDuration: '3s' }} />
      <span className="text-green-400">IDS ACTIVE</span>
    </div>
    <div className="flex-1 flex items-end gap-0.5">
      {[12, 8, 15, 6, 22, 18, 9, 14, 11, 7].map((v, i) => (
        <div key={i} className={`flex-1 rounded-t ${v > 15 ? 'bg-red-400' : 'bg-primary/50'}`} style={{ height: `${v * 4}%` }} />
      ))}
    </div>
    <span className="text-[6px] text-muted-foreground text-center">Packet Analysis</span>
  </div>
);

export const MiniDDoSMonitor = () => (
  <div className="h-full flex flex-col items-center justify-center gap-1">
    <div className="relative">
      <Network className="w-8 h-8 text-green-400" />
      <div className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full flex items-center justify-center">
        <CheckCircle className="w-2 h-2 text-white" />
      </div>
    </div>
    <span className="text-[8px] text-green-400">NO DDoS DETECTED</span>
    <span className="text-[6px] text-muted-foreground">Traffic: 2.4 Gbps</span>
  </div>
);

export const MiniPhishingDetector = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center gap-2">
      <Mail className="w-3 h-3 text-yellow-400" />
      <span className="text-[8px] text-muted-foreground">Email Security</span>
    </div>
    <div className="flex justify-between text-[7px]">
      <span className="text-muted-foreground">Blocked:</span>
      <span className="text-red-400">247 phishing</span>
    </div>
    <div className="flex justify-between text-[7px]">
      <span className="text-muted-foreground">Quarantined:</span>
      <span className="text-yellow-400">89 suspicious</span>
    </div>
    <div className="flex justify-between text-[7px]">
      <span className="text-muted-foreground">Safe:</span>
      <span className="text-green-400">12,458</span>
    </div>
  </div>
);

export const MiniDarkWebMonitor = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between">
      <Ghost className="w-4 h-4 text-purple-400" />
      <span className="text-[7px] text-purple-400">DARK WEB SCAN</span>
    </div>
    <div className="bg-purple-500/10 rounded p-1">
      <div className="text-[7px] text-red-400">⚠ 2 Credentials Found</div>
      <div className="text-[6px] text-muted-foreground mt-0.5">j***@company.com exposed</div>
    </div>
    <span className="text-[6px] text-muted-foreground">Last scan: 2h ago</span>
  </div>
);

export const MiniZeroDayAlert = () => (
  <div className="h-full flex flex-col items-center justify-center gap-2">
    <div className="relative">
      <AlertTriangle className="w-8 h-8 text-red-500 animate-pulse" />
    </div>
    <span className="text-[9px] text-red-400 font-mono">CVE-2024-0001</span>
    <span className="text-[6px] text-muted-foreground">Zero-Day Detected</span>
  </div>
);

export const MiniPatchStatus = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between text-[8px]">
      <Download className="w-3 h-3 text-primary" />
      <span className="text-muted-foreground">Patch Status</span>
    </div>
    <div className="h-3 bg-secondary rounded-full overflow-hidden flex">
      <div className="h-full bg-green-500" style={{ width: '72%' }} />
      <div className="h-full bg-yellow-500" style={{ width: '18%' }} />
      <div className="h-full bg-red-500" style={{ width: '10%' }} />
    </div>
    <div className="flex justify-between text-[6px] text-muted-foreground">
      <span>Patched: 72%</span><span>Pending: 18%</span><span>Failed: 10%</span>
    </div>
  </div>
);

export const MiniEndpointProtection = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between text-[7px]">
      <Laptop className="w-3 h-3 text-primary" />
      <span className="text-green-400">1,247 Protected</span>
    </div>
    <div className="grid grid-cols-2 gap-1">
      <div className="bg-green-500/10 rounded p-1 text-center">
        <span className="text-[8px] text-green-400 font-bold">98%</span>
        <span className="text-[5px] block text-muted-foreground">Compliant</span>
      </div>
      <div className="bg-red-500/10 rounded p-1 text-center">
        <span className="text-[8px] text-red-400 font-bold">23</span>
        <span className="text-[5px] block text-muted-foreground">At Risk</span>
      </div>
    </div>
  </div>
);

export const MiniSIEMAlerts = () => (
  <div className="h-full flex flex-col gap-0.5">
    {[
      { time: '09:42', alert: 'Brute force attempt', severity: 'high' },
      { time: '09:38', alert: 'Unusual outbound traffic', severity: 'medium' },
      { time: '09:35', alert: 'Failed login x5', severity: 'low' },
    ].map((a, i) => (
      <div key={i} className="flex items-center gap-1 text-[6px] bg-secondary/20 rounded px-1 py-0.5">
        <span className="text-primary/70 font-mono w-8">{a.time}</span>
        <span className="flex-1 truncate text-muted-foreground">{a.alert}</span>
        <div className={`w-1.5 h-1.5 rounded-full ${a.severity === 'high' ? 'bg-red-400' : a.severity === 'medium' ? 'bg-yellow-400' : 'bg-blue-400'}`} />
      </div>
    ))}
  </div>
);

export const MiniHoneypotStatus = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between">
      <Target className="w-3 h-3 text-yellow-400" />
      <span className="text-[7px] text-yellow-400">HONEYPOT ACTIVE</span>
    </div>
    <div className="text-[7px] space-y-0.5">
      <div className="flex justify-between"><span className="text-muted-foreground">Traps triggered:</span><span className="text-red-400">47</span></div>
      <div className="flex justify-between"><span className="text-muted-foreground">Unique IPs:</span><span className="text-orange-400">23</span></div>
      <div className="flex justify-between"><span className="text-muted-foreground">Data collected:</span><span className="text-primary">2.4 GB</span></div>
    </div>
  </div>
);

export const MiniIPReputation = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center gap-2 text-[8px]">
      <Globe className="w-3 h-3 text-primary" />
      <span className="text-muted-foreground">IP Reputation Check</span>
    </div>
    <div className="bg-secondary/30 rounded p-1 font-mono text-[7px]">
      <div className="text-muted-foreground">203.0.113.45</div>
      <div className="flex items-center gap-1 mt-0.5">
        <div className="w-2 h-2 bg-red-500 rounded-full" />
        <span className="text-red-400">MALICIOUS</span>
      </div>
    </div>
    <span className="text-[6px] text-muted-foreground">Blacklisted on 7 feeds</span>
  </div>
);

export const MiniRansomwareShield = () => (
  <div className="h-full flex flex-col items-center justify-center gap-2">
    <div className="relative">
      <FileLock className="w-8 h-8 text-green-400" />
      <ShieldCheck className="absolute -bottom-1 -right-1 w-4 h-4 text-green-500" />
    </div>
    <span className="text-[8px] text-green-400">RANSOMWARE SHIELD ON</span>
    <span className="text-[6px] text-muted-foreground">42 file types protected</span>
  </div>
);

export const MiniNetworkSegments = () => (
  <div className="h-full grid grid-cols-3 gap-1">
    {[
      { name: 'DMZ', status: 'secure', color: 'green' },
      { name: 'PROD', status: 'secure', color: 'green' },
      { name: 'DEV', status: 'warning', color: 'yellow' },
      { name: 'GUEST', status: 'isolated', color: 'blue' },
      { name: 'IOT', status: 'secure', color: 'green' },
      { name: 'MGMT', status: 'secure', color: 'green' },
    ].map(seg => (
      <div key={seg.name} className={`flex flex-col items-center justify-center rounded p-0.5 bg-${seg.color}-500/10`}>
        <span className="text-[6px] font-mono text-foreground">{seg.name}</span>
        <div className={`w-1.5 h-1.5 rounded-full bg-${seg.color}-400`} />
      </div>
    ))}
  </div>
);

export const MiniThreatIntel = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between">
      <BrainCircuit className="w-3 h-3 text-primary" />
      <span className="text-[7px] text-primary">THREAT INTEL</span>
    </div>
    {[
      { feed: 'AlienVault', iocs: 1247 },
      { feed: 'VirusTotal', iocs: 892 },
      { feed: 'AbuseIPDB', iocs: 2341 },
    ].map(f => (
      <div key={f.feed} className="flex items-center justify-between text-[6px]">
        <span className="text-muted-foreground">{f.feed}</span>
        <span className="text-primary font-mono">{f.iocs} IOCs</span>
      </div>
    ))}
  </div>
);

export const MiniMITREMatrix = () => (
  <div className="h-full flex flex-col gap-1">
    <span className="text-[7px] text-muted-foreground">MITRE ATT&CK Coverage</span>
    <div className="grid grid-cols-7 gap-0.5 flex-1">
      {['Recon', 'Resource', 'Initial', 'Exec', 'Persist', 'Priv', 'Defense'].map((_, i) => (
        <div key={i} className="flex flex-col gap-0.5">
          {[...Array(4)].map((_, j) => (
            <div key={j} className={`flex-1 rounded-sm ${rand(0, 10) > 3 ? 'bg-green-500/50' : rand(0, 10) > 6 ? 'bg-yellow-500/50' : 'bg-secondary/30'}`} />
          ))}
        </div>
      ))}
    </div>
    <span className="text-[6px] text-green-400 text-center">78% Coverage</span>
  </div>
);

export const MiniIncidentTimeline = () => (
  <div className="h-full flex flex-col gap-1">
    <span className="text-[7px] text-red-400">Active Incident #1247</span>
    <div className="flex-1 relative pl-2">
      <div className="absolute left-0 top-0 bottom-0 w-0.5 bg-red-500/30" />
      {[
        { time: '09:42', event: 'Detection', done: true },
        { time: '09:45', event: 'Containment', done: true },
        { time: '09:52', event: 'Eradication', done: false },
      ].map((e, i) => (
        <div key={i} className="flex items-center gap-1 text-[6px] mb-0.5">
          <div className={`w-1.5 h-1.5 rounded-full -ml-[5px] ${e.done ? 'bg-green-400' : 'bg-yellow-400 animate-pulse'}`} />
          <span className="text-primary/70 font-mono">{e.time}</span>
          <span className="text-muted-foreground">{e.event}</span>
        </div>
      ))}
    </div>
  </div>
);

export const MiniComplianceScore = () => (
  <div className="h-full flex flex-col items-center justify-center gap-1">
    <div className="relative w-12 h-12">
      <svg viewBox="0 0 36 36" className="w-full h-full -rotate-90">
        <circle cx="18" cy="18" r="15" fill="none" stroke="hsl(var(--secondary))" strokeWidth="3" />
        <circle cx="18" cy="18" r="15" fill="none" stroke="hsl(142 76% 36%)" strokeWidth="3" strokeDasharray="85 15" />
      </svg>
      <div className="absolute inset-0 flex items-center justify-center">
        <span className="text-[10px] font-mono text-green-400">85%</span>
      </div>
    </div>
    <span className="text-[7px] text-muted-foreground">SOC 2 Compliance</span>
  </div>
);

export const MiniDataLeakPrevention = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between">
      <FileWarning className="w-3 h-3 text-orange-400" />
      <span className="text-[7px] text-orange-400">DLP ACTIVE</span>
    </div>
    <div className="text-[6px] space-y-0.5">
      <div className="flex justify-between"><span className="text-muted-foreground">PII Detected:</span><span className="text-red-400">12</span></div>
      <div className="flex justify-between"><span className="text-muted-foreground">Blocked Transfers:</span><span className="text-yellow-400">3</span></div>
      <div className="flex justify-between"><span className="text-muted-foreground">Encrypted:</span><span className="text-green-400">1,247</span></div>
    </div>
  </div>
);

export const MiniPenTestResults = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between text-[7px]">
      <Crosshair className="w-3 h-3 text-red-400" />
      <span className="text-muted-foreground">Pen Test Report</span>
    </div>
    <div className="flex-1 flex items-center gap-2">
      <div className="flex flex-col gap-0.5">
        {[
          { label: 'Critical', count: 0, color: 'bg-green-500' },
          { label: 'High', count: 2, color: 'bg-red-500' },
          { label: 'Medium', count: 8, color: 'bg-yellow-500' },
          { label: 'Low', count: 15, color: 'bg-blue-500' },
        ].map(v => (
          <div key={v.label} className="flex items-center gap-1 text-[5px]">
            <div className={`w-1 h-1 rounded-full ${v.color}`} />
            <span className="text-muted-foreground">{v.count}</span>
          </div>
        ))}
      </div>
      <div className="flex-1 text-center">
        <span className="text-lg font-mono text-yellow-400">B+</span>
        <span className="text-[6px] block text-muted-foreground">Security Grade</span>
      </div>
    </div>
  </div>
);

export const MiniSecurityPosture = () => (
  <div className="h-full flex flex-col gap-1">
    <span className="text-[7px] text-muted-foreground">Security Posture</span>
    <div className="flex gap-0.5 h-3">
      {[85, 72, 90, 68, 95].map((v, i) => (
        <div key={i} className="flex-1 bg-secondary/30 rounded overflow-hidden">
          <div className={`h-full ${v > 80 ? 'bg-green-500' : v > 60 ? 'bg-yellow-500' : 'bg-red-500'}`} style={{ height: `${v}%` }} />
        </div>
      ))}
    </div>
    <div className="flex justify-between text-[5px] text-muted-foreground">
      <span>Net</span><span>End</span><span>App</span><span>Data</span><span>IAM</span>
    </div>
  </div>
);

export const MiniForensicStatus = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center gap-2">
      <FileSearch className="w-3 h-3 text-blue-400" />
      <span className="text-[7px] text-blue-400">FORENSIC ANALYSIS</span>
    </div>
    <div className="bg-secondary/30 rounded p-1">
      <div className="flex items-center justify-between text-[6px]">
        <span className="text-muted-foreground">Evidence collected:</span>
        <span className="text-primary">247 artifacts</span>
      </div>
      <div className="h-1 bg-secondary rounded-full mt-1">
        <div className="h-full w-3/4 bg-blue-400 rounded-full" />
      </div>
    </div>
    <span className="text-[6px] text-muted-foreground">Analysis: 75% complete</span>
  </div>
);

export const MiniCertificateMonitor = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between text-[7px]">
      <BadgeCheck className="w-3 h-3 text-primary" />
      <span className="text-muted-foreground">Certificates</span>
    </div>
    {[
      { domain: '*.example.com', days: 89, status: 'ok' },
      { domain: 'api.example.com', days: 12, status: 'warning' },
      { domain: 'old.example.com', days: -5, status: 'expired' },
    ].map(c => (
      <div key={c.domain} className="flex items-center justify-between text-[6px]">
        <span className="truncate flex-1 text-muted-foreground">{c.domain}</span>
        <span className={c.status === 'ok' ? 'text-green-400' : c.status === 'warning' ? 'text-yellow-400' : 'text-red-400'}>
          {c.days > 0 ? `${c.days}d` : 'EXP'}
        </span>
      </div>
    ))}
  </div>
);

export const MiniPortScanner = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between text-[7px]">
      <ScanLine className="w-3 h-3 text-primary" />
      <span className="text-green-400">SCAN COMPLETE</span>
    </div>
    <div className="grid grid-cols-4 gap-0.5 text-[6px] font-mono">
      {[22, 80, 443, 3306, 5432, 8080, 9090, 27017].map(port => (
        <div key={port} className={`text-center rounded py-0.5 ${[22, 80, 443].includes(port) ? 'bg-green-500/20 text-green-400' : 'bg-secondary/20 text-muted-foreground'}`}>
          {port}
        </div>
      ))}
    </div>
    <span className="text-[6px] text-muted-foreground">3 open, 5 filtered</span>
  </div>
);

export const MiniUserBehavior = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between">
      <UserCheck className="w-3 h-3 text-primary" />
      <span className="text-[7px] text-muted-foreground">UEBA</span>
    </div>
    {[
      { user: 'admin@co', risk: 12, trend: 'down' },
      { user: 'john.d@co', risk: 78, trend: 'up' },
      { user: 'api-svc', risk: 45, trend: 'stable' },
    ].map(u => (
      <div key={u.user} className="flex items-center gap-1 text-[6px]">
        <span className="flex-1 truncate text-muted-foreground">{u.user}</span>
        <div className={`w-6 h-1.5 rounded-full ${u.risk > 60 ? 'bg-red-400' : u.risk > 30 ? 'bg-yellow-400' : 'bg-green-400'}`} style={{ width: `${u.risk}%` }} />
        {u.trend === 'up' ? <ArrowUp className="w-2 h-2 text-red-400" /> : u.trend === 'down' ? <ArrowDown className="w-2 h-2 text-green-400" /> : <Minus className="w-2 h-2 text-muted-foreground" />}
      </div>
    ))}
  </div>
);

export const MiniAPISecurityGateway = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between text-[7px]">
      <Webhook className="w-3 h-3 text-primary" />
      <span className="text-green-400">API GW SECURE</span>
    </div>
    <div className="text-[6px] space-y-0.5">
      <div className="flex justify-between"><span className="text-muted-foreground">Rate Limited:</span><span className="text-yellow-400">247</span></div>
      <div className="flex justify-between"><span className="text-muted-foreground">Auth Failures:</span><span className="text-red-400">18</span></div>
      <div className="flex justify-between"><span className="text-muted-foreground">Requests/min:</span><span className="text-primary">12.4K</span></div>
    </div>
  </div>
);

export const MiniSecretScanner = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between">
      <KeyRound className="w-3 h-3 text-yellow-400" />
      <span className="text-[7px] text-yellow-400">SECRET SCAN</span>
    </div>
    <div className="bg-yellow-500/10 rounded p-1 text-[6px]">
      <div className="text-yellow-400">⚠ 3 Exposed Secrets</div>
      <div className="text-muted-foreground mt-0.5">AWS_KEY in config.js:42</div>
    </div>
    <span className="text-[6px] text-muted-foreground">Scanned: 1,247 files</span>
  </div>
);

export const MiniContainerSecurity = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between text-[7px]">
      <Box className="w-3 h-3 text-primary" />
      <span className="text-muted-foreground">Container Security</span>
    </div>
    <div className="grid grid-cols-2 gap-1 text-[6px]">
      <div className="bg-green-500/10 rounded p-1 text-center"><span className="text-green-400 font-bold">42</span><span className="block text-muted-foreground">Secure</span></div>
      <div className="bg-red-500/10 rounded p-1 text-center"><span className="text-red-400 font-bold">3</span><span className="block text-muted-foreground">Vuln</span></div>
    </div>
    <span className="text-[6px] text-muted-foreground">Last scan: 15m ago</span>
  </div>
);

export const MiniCloudSecurityScore = () => (
  <div className="h-full flex flex-col items-center justify-center gap-1">
    <Globe className="w-6 h-6 text-primary" />
    <div className="flex items-center gap-1">
      <span className="text-lg font-mono text-primary">92</span>
      <span className="text-[8px] text-muted-foreground">/100</span>
    </div>
    <span className="text-[6px] text-green-400">Cloud Security Score</span>
  </div>
);

export const MiniWAFStatus = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between">
      <Shield className="w-4 h-4 text-green-400" />
      <span className="text-[8px] text-green-400">WAF ACTIVE</span>
    </div>
    <div className="text-[6px] space-y-0.5">
      <div className="flex justify-between"><span className="text-muted-foreground">SQLi Blocked:</span><span className="text-red-400">147</span></div>
      <div className="flex justify-between"><span className="text-muted-foreground">XSS Blocked:</span><span className="text-red-400">89</span></div>
      <div className="flex justify-between"><span className="text-muted-foreground">Rules Active:</span><span className="text-primary">2,451</span></div>
    </div>
  </div>
);

export const MiniBotDetection = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between text-[7px]">
      <ScanLine className="w-3 h-3 text-primary" />
      <span className="text-muted-foreground">Bot Detection</span>
    </div>
    <div className="flex-1 flex items-end gap-0.5">
      {[45, 32, 67, 28, 54, 89, 41, 73].map((v, i) => (
        <div key={i} className="flex-1 flex flex-col items-center gap-0.5">
          <div className={`w-full rounded-t ${v > 60 ? 'bg-red-400' : 'bg-primary/50'}`} style={{ height: `${v}%` }} />
        </div>
      ))}
    </div>
    <span className="text-[6px] text-red-400 text-center">23% bot traffic detected</span>
  </div>
);

export const MiniSSHMonitor = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between">
      <Terminal className="w-3 h-3 text-primary" />
      <span className="text-[7px] text-muted-foreground">SSH Sessions</span>
    </div>
    {[
      { user: 'root', ip: '10.0.0.5', status: 'active' },
      { user: 'deploy', ip: '10.0.0.12', status: 'active' },
      { user: 'admin', ip: '203.0.113.5', status: 'blocked' },
    ].map((s, i) => (
      <div key={i} className="flex items-center gap-1 text-[6px]">
        <span className="text-primary">{s.user}</span>
        <span className="flex-1 text-muted-foreground truncate">{s.ip}</span>
        <div className={`w-1.5 h-1.5 rounded-full ${s.status === 'active' ? 'bg-green-400' : 'bg-red-400'}`} />
      </div>
    ))}
  </div>
);

export const MiniAuditLog = () => (
  <div className="h-full flex flex-col gap-0.5 text-[5px] font-mono">
    <div className="flex items-center justify-between text-[7px] mb-0.5">
      <FileText className="w-3 h-3 text-primary" />
      <span className="text-muted-foreground">Audit Trail</span>
    </div>
    {[
      { time: '09:42:15', event: 'USER_LOGIN admin', type: 'info' },
      { time: '09:42:08', event: 'PERMISSION_CHANGE', type: 'warn' },
      { time: '09:41:55', event: 'FILE_ACCESS sensitive.dat', type: 'info' },
    ].map((l, i) => (
      <div key={i} className="flex gap-1 truncate">
        <span className="text-primary/70">{l.time}</span>
        <span className={l.type === 'warn' ? 'text-yellow-400' : 'text-muted-foreground'}>{l.event}</span>
      </div>
    ))}
  </div>
);

export const MiniMFAStatus = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between">
      <Fingerprint className="w-4 h-4 text-primary" />
      <span className="text-[8px] text-muted-foreground">MFA Adoption</span>
    </div>
    <div className="h-3 bg-secondary rounded-full overflow-hidden">
      <div className="h-full bg-gradient-to-r from-green-500 to-primary" style={{ width: '87%' }} />
    </div>
    <div className="flex justify-between text-[6px] text-muted-foreground">
      <span>87% enrolled</span>
      <span className="text-yellow-400">142 pending</span>
    </div>
  </div>
);

export const MiniPrivilegedAccess = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between text-[7px]">
      <LockKeyhole className="w-3 h-3 text-yellow-400" />
      <span className="text-yellow-400">PAM</span>
    </div>
    <div className="text-[6px] space-y-0.5">
      <div className="flex justify-between"><span className="text-muted-foreground">Active Sessions:</span><span className="text-primary">7</span></div>
      <div className="flex justify-between"><span className="text-muted-foreground">Priv Users:</span><span className="text-yellow-400">23</span></div>
      <div className="flex justify-between"><span className="text-muted-foreground">Password Age:</span><span className="text-green-400">12d</span></div>
    </div>
  </div>
);

export const MiniVPNStatus = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between">
      <Network className="w-4 h-4 text-green-400" />
      <span className="text-[8px] text-green-400">VPN CONNECTED</span>
    </div>
    <div className="text-[6px] space-y-0.5">
      <div className="flex justify-between"><span className="text-muted-foreground">Server:</span><span className="text-primary">NYC-01</span></div>
      <div className="flex justify-between"><span className="text-muted-foreground">Protocol:</span><span>WireGuard</span></div>
      <div className="flex justify-between"><span className="text-muted-foreground">Connected:</span><span className="text-primary">247 users</span></div>
    </div>
  </div>
);

export const MiniEmailSecurity = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between text-[7px]">
      <Mail className="w-3 h-3 text-primary" />
      <span className="text-muted-foreground">Email Security</span>
    </div>
    <div className="grid grid-cols-3 gap-1 text-center text-[6px]">
      <div><span className="text-green-400 font-bold">SPF</span><CheckCircle className="w-2 h-2 mx-auto text-green-400" /></div>
      <div><span className="text-green-400 font-bold">DKIM</span><CheckCircle className="w-2 h-2 mx-auto text-green-400" /></div>
      <div><span className="text-green-400 font-bold">DMARC</span><CheckCircle className="w-2 h-2 mx-auto text-green-400" /></div>
    </div>
    <span className="text-[6px] text-green-400 text-center">All protocols active</span>
  </div>
);

export const MiniAssetInventory = () => (
  <div className="h-full flex flex-col gap-1">
    <span className="text-[7px] text-muted-foreground">Asset Inventory</span>
    <div className="grid grid-cols-2 gap-1 text-[6px]">
      <div className="flex items-center gap-1"><Database className="w-2 h-2 text-primary" /><span>42 Servers</span></div>
      <div className="flex items-center gap-1"><Laptop className="w-2 h-2 text-primary" /><span>847 Endpoints</span></div>
      <div className="flex items-center gap-1"><Smartphone className="w-2 h-2 text-primary" /><span>324 Mobile</span></div>
      <div className="flex items-center gap-1"><Router className="w-2 h-2 text-primary" /><span>56 Network</span></div>
    </div>
  </div>
);

export const MiniBackupStatus = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between">
      <Database className="w-3 h-3 text-green-400" />
      <span className="text-[7px] text-green-400">BACKUP OK</span>
    </div>
    <div className="text-[6px] space-y-0.5">
      <div className="flex justify-between"><span className="text-muted-foreground">Last Backup:</span><span className="text-primary">2h ago</span></div>
      <div className="flex justify-between"><span className="text-muted-foreground">Size:</span><span>247 GB</span></div>
      <div className="flex justify-between"><span className="text-muted-foreground">Encrypted:</span><span className="text-green-400">Yes</span></div>
    </div>
  </div>
);

export const MiniGDPRStatus = () => (
  <div className="h-full flex flex-col items-center justify-center gap-1">
    <div className="relative w-12 h-12">
      <svg viewBox="0 0 36 36" className="w-full h-full -rotate-90">
        <circle cx="18" cy="18" r="15" fill="none" stroke="hsl(var(--secondary))" strokeWidth="3" />
        <circle cx="18" cy="18" r="15" fill="none" stroke="hsl(var(--primary))" strokeWidth="3" strokeDasharray="92 8" />
      </svg>
      <div className="absolute inset-0 flex items-center justify-center">
        <span className="text-[10px] font-mono text-primary">92%</span>
      </div>
    </div>
    <span className="text-[7px] text-muted-foreground">GDPR Compliance</span>
  </div>
);

export const MiniSecurityTraining = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between text-[7px]">
      <Award className="w-3 h-3 text-primary" />
      <span className="text-muted-foreground">Security Training</span>
    </div>
    <div className="h-2 bg-secondary rounded-full overflow-hidden">
      <div className="h-full bg-green-500" style={{ width: '78%' }} />
    </div>
    <div className="flex justify-between text-[6px]">
      <span className="text-muted-foreground">78% completed</span>
      <span className="text-yellow-400">12 overdue</span>
    </div>
  </div>
);

export const MiniIOCFeed = () => (
  <div className="h-full flex flex-col gap-0.5">
    <div className="flex items-center justify-between text-[7px]">
      <Biohazard className="w-3 h-3 text-red-400" />
      <span className="text-muted-foreground">IOC Feed</span>
    </div>
    {[
      { type: 'IP', value: '203.0.113.45', threat: 'C2' },
      { type: 'Hash', value: 'a1b2c3...', threat: 'Malware' },
      { type: 'Domain', value: 'evil.com', threat: 'Phish' },
    ].map((ioc, i) => (
      <div key={i} className="flex items-center gap-1 text-[5px] bg-secondary/20 rounded px-1">
        <span className="text-primary">{ioc.type}</span>
        <span className="flex-1 truncate font-mono text-muted-foreground">{ioc.value}</span>
        <span className="text-red-400">{ioc.threat}</span>
      </div>
    ))}
  </div>
);

export const MiniNetworkTraffic = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between text-[7px]">
      <Network className="w-3 h-3 text-primary" />
      <span className="text-muted-foreground">Network Traffic</span>
    </div>
    <svg viewBox="0 0 100 30" className="flex-1">
      <path d="M0,25 Q10,20 20,22 T40,15 T60,18 T80,10 T100,12" fill="none" stroke="hsl(var(--primary))" strokeWidth="1.5" />
      <path d="M0,28 Q10,25 20,26 T40,22 T60,24 T80,20 T100,21" fill="none" stroke="hsl(142 76% 36%)" strokeWidth="1.5" />
    </svg>
    <div className="flex justify-between text-[6px]">
      <span className="text-primary">In: 2.4 Gbps</span>
      <span className="text-green-400">Out: 1.8 Gbps</span>
    </div>
  </div>
);

export const MiniZeroTrust = () => (
  <div className="h-full flex flex-col items-center justify-center gap-1">
    <div className="flex items-center gap-1">
      <ShieldCheck className="w-5 h-5 text-green-400" />
      <span className="text-[8px] text-green-400 font-mono">ZERO TRUST</span>
    </div>
    <div className="grid grid-cols-3 gap-1 text-[5px] text-center">
      <div><CheckCircle className="w-2 h-2 mx-auto text-green-400" /><span className="text-muted-foreground">Verify</span></div>
      <div><CheckCircle className="w-2 h-2 mx-auto text-green-400" /><span className="text-muted-foreground">Least Priv</span></div>
      <div><CheckCircle className="w-2 h-2 mx-auto text-green-400" /><span className="text-muted-foreground">Assume Breach</span></div>
    </div>
  </div>
);

export const MiniSecurityAlerts = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between">
      <Siren className="w-4 h-4 text-red-400 animate-pulse" />
      <span className="text-[8px] text-red-400">5 ALERTS</span>
    </div>
    <div className="flex-1 space-y-0.5">
      {[
        { msg: 'Brute force detected', time: '2m' },
        { msg: 'Anomalous login', time: '5m' },
      ].map((a, i) => (
        <div key={i} className="flex items-center gap-1 text-[6px] bg-red-500/10 rounded px-1 py-0.5">
          <span className="flex-1 truncate text-red-300">{a.msg}</span>
          <span className="text-muted-foreground">{a.time}</span>
        </div>
      ))}
    </div>
  </div>
);

export const MiniDNSSecurity = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between text-[7px]">
      <Globe className="w-3 h-3 text-primary" />
      <span className="text-green-400">DNS SECURE</span>
    </div>
    <div className="text-[6px] space-y-0.5">
      <div className="flex justify-between"><span className="text-muted-foreground">DNSSEC:</span><span className="text-green-400">Enabled</span></div>
      <div className="flex justify-between"><span className="text-muted-foreground">DoH/DoT:</span><span className="text-green-400">Active</span></div>
      <div className="flex justify-between"><span className="text-muted-foreground">Blocked:</span><span className="text-red-400">1,247 domains</span></div>
    </div>
  </div>
);