export function ArchitectureTab() {
  return (
    <div className="space-y-6">
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="font-semibold text-slate-800 text-lg mb-4">Systemarchitektur</h3>

        <div className="bg-slate-900 text-green-400 p-6 rounded-lg font-mono text-sm overflow-x-auto">
          <pre>{`
┌─────────────────────────────────────────────────────────────────────┐
│                        Frontend (Next.js)                            │
│                     admin-v2:3000/sdk/advisory-board                 │
└───────────────────────────────────┬─────────────────────────────────┘
                                    │ HTTPS
                                    ▼
┌─────────────────────────────────────────────────────────────────────┐
│                     AI Compliance SDK (Go)                           │
│                          Port 8090                                   │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │                    Policy Engine                              │   │
│  │  ┌───────────────────────────────────────────────────────┐   │   │
│  │  │  YAML-basierte Regeln (ucca_policy_v1.yaml)           │   │   │
│  │  │  ~45 Regeln in 7 Kategorien                           │   │   │
│  │  │  Deterministisch - Kein LLM in Entscheidungslogik     │   │   │
│  │  └───────────────────────────────────────────────────────┘   │   │
│  │                          │                                    │   │
│  │                          ▼                                    │   │
│  │  ┌────────────────┐  ┌────────────────┐  ┌────────────────┐  │   │
│  │  │  Controls      │  │  Patterns      │  │  Examples      │  │   │
│  │  │  Library       │  │  Library       │  │  Library       │  │   │
│  │  └────────────────┘  └────────────────┘  └────────────────┘  │   │
│  └─────────────────────────────────────────────────────────────┘   │
│                                                                      │
│  ┌──────────────────┐  ┌──────────────────┐                        │
│  │  LLM Integration │  │  Legal RAG       │──────┐                  │
│  │  (nur Explain)   │  │  Client          │      │                  │
│  └──────────────────┘  └──────────────────┘      │                  │
└─────────────────────────────┬────────────────────┼──────────────────┘
                              │                    │
                              ▼                    ▼
┌─────────────────────────────────────────────────────────────────────┐
│                        Datenschicht                                  │
│  ┌────────────────────┐  ┌────────────────────┐                     │
│  │    PostgreSQL      │  │    Qdrant          │                     │
│  │    (Assessments,   │  │    (Legal Corpus,  │                     │
│  │     Escalations)   │  │     2,274 Chunks)  │                     │
│  └────────────────────┘  └────────────────────┘                     │
└─────────────────────────────────────────────────────────────────────┘
          `}</pre>
        </div>

        <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
            <h4 className="font-medium text-blue-800 mb-2">Datenfluss</h4>
            <ol className="text-sm text-blue-700 list-decimal list-inside space-y-1">
              <li>Benutzer beschreibt Use Case im Frontend</li>
              <li>Policy Engine evaluiert gegen alle Regeln</li>
              <li>Ergebnis mit Controls + Patterns zurueck</li>
              <li>Optional: LLM erklaert das Ergebnis</li>
              <li>Bei Risiko: Automatische Eskalation</li>
            </ol>
          </div>
          <div className="p-4 bg-green-50 rounded-lg border border-green-200">
            <h4 className="font-medium text-green-800 mb-2">Sicherheitsmerkmale</h4>
            <ul className="text-sm text-green-700 list-disc list-inside space-y-1">
              <li>TLS 1.3 Verschluesselung</li>
              <li>RBAC mit Tenant-Isolation</li>
              <li>JWT-basierte Authentifizierung</li>
              <li>Audit-Trail aller Aktionen</li>
              <li>Keine Rohtext-Speicherung (nur Hash)</li>
            </ul>
          </div>
        </div>
      </div>

      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="font-semibold text-slate-800 text-lg mb-4">Eskalations-Workflow</h3>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-slate-200">
                <th className="text-left py-2 px-3 font-medium text-slate-600">Level</th>
                <th className="text-left py-2 px-3 font-medium text-slate-600">Ausloeser</th>
                <th className="text-left py-2 px-3 font-medium text-slate-600">Pruefer</th>
                <th className="text-left py-2 px-3 font-medium text-slate-600">SLA</th>
              </tr>
            </thead>
            <tbody>
              <tr className="border-b border-slate-100 bg-green-50">
                <td className="py-2 px-3 font-medium text-green-700">E0</td>
                <td className="py-2 px-3 text-slate-600">Nur INFO-Regeln, Risiko &lt; 20</td>
                <td className="py-2 px-3 text-slate-600">Automatisch</td>
                <td className="py-2 px-3 text-slate-600">-</td>
              </tr>
              <tr className="border-b border-slate-100 bg-yellow-50">
                <td className="py-2 px-3 font-medium text-yellow-700">E1</td>
                <td className="py-2 px-3 text-slate-600">WARN-Regeln, Risiko 20-40</td>
                <td className="py-2 px-3 text-slate-600">Team-Lead</td>
                <td className="py-2 px-3 text-slate-600">24h / 72h</td>
              </tr>
              <tr className="border-b border-slate-100 bg-orange-50">
                <td className="py-2 px-3 font-medium text-orange-700">E2</td>
                <td className="py-2 px-3 text-slate-600">Art. 9 Daten, DSFA empfohlen, Risiko 40-60</td>
                <td className="py-2 px-3 text-slate-600">DSB</td>
                <td className="py-2 px-3 text-slate-600">8h / 48h</td>
              </tr>
              <tr className="bg-red-50">
                <td className="py-2 px-3 font-medium text-red-700">E3</td>
                <td className="py-2 px-3 text-slate-600">BLOCK-Regeln, Art. 22, Risiko &gt; 60</td>
                <td className="py-2 px-3 text-slate-600">DSB + Legal</td>
                <td className="py-2 px-3 text-slate-600">4h / 24h</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}
