export function TabOverview() {
  return (
    <div className="space-y-6">
      <h3 className="text-lg font-semibold text-slate-900">Voice-First Architektur</h3>

      {/* Architecture Diagram */}
      <div className="bg-slate-50 rounded-lg p-6 font-mono text-sm overflow-x-auto">
        <pre className="text-slate-700">{`
┌──────────────────────────────────────────────────────────────────┐
│                    LEHRERGERAET (PWA / App)                       │
│  ┌────────────────────────────────────────────────────────────┐  │
│  │ VoiceCapture.tsx │ voice-encryption.ts │ voice-api.ts      │  │
│  │ Mikrofon         │ AES-256-GCM         │ WebSocket Client  │  │
│  └────────────────────────────────────────────────────────────┘  │
└───────────────────────────┬──────────────────────────────────────┘
                            │ WebSocket (wss://)
                            ▼
┌──────────────────────────────────────────────────────────────────┐
│                    VOICE SERVICE (Port 8091)                      │
│  ┌────────────────────────────────────────────────────────────┐  │
│  │ main.py │ streaming.py │ sessions.py │ tasks.py            │  │
│  └────────────────────────────────────────────────────────────┘  │
│  ┌────────────────────────────────────────────────────────────┐  │
│  │ task_orchestrator.py │ intent_router.py │ encryption        │  │
│  └────────────────────────────────────────────────────────────┘  │
└───────────────────────────┬──────────────────────────────────────┘
                            │
         ┌──────────────────┼──────────────────┐
         ▼                  ▼                  ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ PersonaPlex-7B  │ │ Ollama Fallback │ │ Valkey Cache    │
│ (A100 GPU)      │ │ (Mac Mini)      │ │ (Sessions)      │
└─────────────────┘ └─────────────────┘ └─────────────────┘
`}</pre>
      </div>

      {/* Technology Stack */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
          <h4 className="font-semibold text-blue-800 mb-2">Voice Model (Produktion)</h4>
          <p className="text-sm text-blue-700">PersonaPlex-7B (NVIDIA)</p>
          <p className="text-xs text-blue-600 mt-1">Full-Duplex Speech-to-Speech</p>
          <p className="text-xs text-blue-500">Lizenz: MIT + NVIDIA Open Model</p>
        </div>
        <div className="bg-green-50 border border-green-200 rounded-lg p-4">
          <h4 className="font-semibold text-green-800 mb-2">Agent Orchestration</h4>
          <p className="text-sm text-green-700">TaskOrchestrator</p>
          <p className="text-xs text-green-600 mt-1">Task State Machine</p>
          <p className="text-xs text-green-500">Lizenz: Proprietary</p>
        </div>
        <div className="bg-purple-50 border border-purple-200 rounded-lg p-4">
          <h4 className="font-semibold text-purple-800 mb-2">Audio Codec</h4>
          <p className="text-sm text-purple-700">Mimi (24kHz, 80ms)</p>
          <p className="text-xs text-purple-600 mt-1">Low-Latency Streaming</p>
          <p className="text-xs text-purple-500">Lizenz: MIT</p>
        </div>
      </div>

      {/* Key Files */}
      <div>
        <h4 className="font-semibold text-slate-800 mb-3">Wichtige Dateien</h4>
        <div className="bg-white border border-slate-200 rounded-lg overflow-hidden">
          <table className="min-w-full divide-y divide-slate-200">
            <thead className="bg-slate-50">
              <tr>
                <th className="px-4 py-2 text-left text-xs font-medium text-slate-500 uppercase">Datei</th>
                <th className="px-4 py-2 text-left text-xs font-medium text-slate-500 uppercase">Beschreibung</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-200">
              <tr><td className="px-4 py-2 font-mono text-sm">voice-service/main.py</td><td className="px-4 py-2 text-sm text-slate-600">FastAPI Entry, WebSocket Handler</td></tr>
              <tr><td className="px-4 py-2 font-mono text-sm">voice-service/services/task_orchestrator.py</td><td className="px-4 py-2 text-sm text-slate-600">Task State Machine</td></tr>
              <tr><td className="px-4 py-2 font-mono text-sm">voice-service/services/intent_router.py</td><td className="px-4 py-2 text-sm text-slate-600">Intent Detection (22 Types)</td></tr>
              <tr><td className="px-4 py-2 font-mono text-sm">voice-service/services/encryption_service.py</td><td className="px-4 py-2 text-sm text-slate-600">Namespace Key Management</td></tr>
              <tr><td className="px-4 py-2 font-mono text-sm">studio-v2/components/voice/VoiceCapture.tsx</td><td className="px-4 py-2 text-sm text-slate-600">Frontend Mikrofon + Crypto</td></tr>
              <tr><td className="px-4 py-2 font-mono text-sm">studio-v2/lib/voice/voice-encryption.ts</td><td className="px-4 py-2 text-sm text-slate-600">AES-256-GCM Client-side</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}