breakpilot-compliance/developer-portal/app/development/docs/_components/IntroArchitectureSection.tsx

import { CodeBlock, InfoBox } from '@/components/DevPortalLayout'

export function IntroArchitectureSection() {
  return (
    <>
      <h2 id="einfuehrung">1. Was ist der Compliance Hub?</h2>
      <p>
        Der <strong>BreakPilot Compliance Hub</strong> ist ein System, das Organisationen dabei
        unterstuetzt, gesetzliche Vorschriften einzuhalten. Er beantwortet die zentrale Frage:
      </p>
      <blockquote>
        <em>&ldquo;Duerfen wir das, was wir vorhaben, ueberhaupt so machen -- und wenn ja, welche
        Auflagen muessen wir dafuer erfuellen?&rdquo;</em>
      </blockquote>
      <p>
        Konkret geht es um EU- und deutsche Gesetze, die fuer den Umgang mit Daten und
        kuenstlicher Intelligenz relevant sind: die <strong>DSGVO</strong>, den <strong>AI Act</strong>,
        die <strong>NIS2-Richtlinie</strong> und viele weitere Regelwerke. Das System hat vier
        Hauptaufgaben:
      </p>
      <ol>
        <li><strong>Wissen bereitstellen:</strong> Hunderte Rechtstexte sind eingelesen und durchsuchbar -- nicht nur per Stichwort, sondern nach Bedeutung (semantische Suche).</li>
        <li><strong>Bewerten:</strong> Wenn ein Nutzer einen geplanten KI-Anwendungsfall beschreibt, bewertet das System automatisch, ob er zulaessig ist, welches Risiko besteht und welche Massnahmen noetig sind.</li>
        <li><strong>Dokumentieren:</strong> Das System erzeugt die Dokumente, die Aufsichtsbehoerden verlangen: Datenschutz-Folgenabschaetzungen (DSFA), technisch-organisatorische Massnahmen (TOM), Verarbeitungsverzeichnisse (VVT) und mehr.</li>
        <li><strong>Nachweisen:</strong> Jede Bewertung, jede Entscheidung und jeder Zugriff wird revisionssicher protokolliert -- als Nachweis gegenueber Pruefer und Behoerden.</li>
      </ol>

      <InfoBox type="info" title="Kern-Designprinzip">
        <strong>Die KI ist nicht die Entscheidungsinstanz.</strong> Alle
        Compliance-Entscheidungen (zulaessig / bedingt zulaessig / nicht zulaessig) trifft ein
        deterministisches Regelwerk. Das LLM (Sprachmodell) wird ausschliesslich dafuer verwendet,
        Ergebnisse verstaendlich zu <em>erklaeren</em> -- niemals um sie zu <em>treffen</em>.
      </InfoBox>

      <h2 id="architektur">2. Architektur im Ueberblick</h2>
      <p>
        Das System besteht aus mehreren Bausteinen, die jeweils eine klar abgegrenzte Aufgabe haben.
        Man kann es sich wie ein Buero vorstellen:
      </p>

      <div className="not-prose my-6 overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200 text-sm">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Baustein</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Analogie</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Technologie</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Aufgabe</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            <tr><td className="px-4 py-3 font-medium">API-Gateway</td><td className="px-4 py-3">Empfang / Rezeption</td><td className="px-4 py-3">Go (Gin)</td><td className="px-4 py-3">Nimmt alle Anfragen entgegen, prueft Identitaet und leitet weiter</td></tr>
            <tr><td className="px-4 py-3 font-medium">Compliance Engine (UCCA)</td><td className="px-4 py-3">Sachbearbeiter</td><td className="px-4 py-3">Go</td><td className="px-4 py-3">Bewertet Anwendungsfaelle gegen 45+ Regeln und berechnet Risikoscore</td></tr>
            <tr><td className="px-4 py-3 font-medium">RAG Service</td><td className="px-4 py-3">Rechtsbibliothek</td><td className="px-4 py-3">Python (FastAPI)</td><td className="px-4 py-3">Durchsucht Gesetze semantisch und beantwortet Rechtsfragen</td></tr>
            <tr><td className="px-4 py-3 font-medium">Legal Corpus</td><td className="px-4 py-3">Gesetzesbuecher im Regal</td><td className="px-4 py-3">YAML/JSON + Qdrant</td><td className="px-4 py-3">Enthaelt alle Rechtstexte als durchsuchbare Wissensbasis</td></tr>
            <tr><td className="px-4 py-3 font-medium">Policy Engine</td><td className="px-4 py-3">Regelbuch des Sachbearbeiters</td><td className="px-4 py-3">YAML-Dateien</td><td className="px-4 py-3">45+ auditierbare Pruefregeln in maschinenlesbarer Form</td></tr>
            <tr><td className="px-4 py-3 font-medium">Eskalations-System</td><td className="px-4 py-3">Chef-Unterschrift</td><td className="px-4 py-3">Go + PostgreSQL</td><td className="px-4 py-3">Leitet kritische Faelle an menschliche Pruefer weiter</td></tr>
            <tr><td className="px-4 py-3 font-medium">Admin Dashboard</td><td className="px-4 py-3">Schreibtisch</td><td className="px-4 py-3">Next.js</td><td className="px-4 py-3">Benutzeroberflaeche fuer alle Funktionen</td></tr>
            <tr><td className="px-4 py-3 font-medium">PostgreSQL</td><td className="px-4 py-3">Aktenschrank</td><td className="px-4 py-3">SQL-Datenbank</td><td className="px-4 py-3">Speichert Assessments, Eskalationen, Controls, Audit-Trail</td></tr>
            <tr><td className="px-4 py-3 font-medium">Qdrant</td><td className="px-4 py-3">Suchindex der Bibliothek</td><td className="px-4 py-3">Vektordatenbank</td><td className="px-4 py-3">Ermoeglicht semantische Suche ueber Rechtstexte</td></tr>
          </tbody>
        </table>
      </div>

      <h3>Wie die Bausteine zusammenspielen</h3>
      <CodeBlock language="text" filename="Datenfluss: Vom Benutzer zur Compliance-Bewertung">
{`Benutzer (Browser)
     |
     v
┌─────────────────────────────┐
│  API-Gateway (Port 8080)    │  ← Authentifizierung, Rate-Limiting, Tenant-Isolation
│  "Wer bist du? Darfst du?"  │
└──────────┬──────────────────┘
           |
     ┌─────┼──────────────────────────────┐
     v     v                              v
┌─────────────┐  ┌──────────────┐  ┌──────────────┐
│  Compliance  │  │  RAG Service │  │  Security    │
│  Engine      │  │  (Bibliothek)│  │  Scanner     │
│  (Bewertung) │  │              │  │              │
└──────┬───┬──┘  └──────┬───────┘  └──────────────┘
       |   |            |
       |   |     ┌──────┴───────┐
       |   |     │   Qdrant     │  ← Vektordatenbank mit allen Rechtstexten
       |   |     │ (Suchindex)  │
       |   |     └──────────────┘
       |   |
       |   └──────────────────────┐
       v                          v
┌──────────────┐          ┌──────────────┐
│  PostgreSQL  │          │  Eskalation  │
│  (Speicher)  │          │  (E0-E3)     │
└──────────────┘          └──────────────┘`}
      </CodeBlock>
    </>
  )
}