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

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

export function ComplianceEngineSection() {
  return (
    <>
      <h2 id="compliance-engine">4. Die Compliance Engine: Wie Bewertungen funktionieren</h2>
      <p>
        Das Kernmodul des Compliance Hub ist die <strong>UCCA Engine</strong> (Unified Compliance
        Control Assessment). Sie bewertet, ob ein geplanter KI-Anwendungsfall zulaessig ist.
      </p>

      <h3>4.1 Der Fragebogen (Use Case Intake)</h3>
      <div className="not-prose my-4 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">Bereich</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Typische Fragen</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Warum relevant?</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            <tr><td className="px-4 py-3 font-medium">Datentypen</td><td className="px-4 py-3">Werden personenbezogene Daten verarbeitet? Besondere Kategorien (Art. 9)?</td><td className="px-4 py-3">Art. 9-Daten (Gesundheit, Religion, etc.) erfordern besondere Schutzmassnahmen</td></tr>
            <tr><td className="px-4 py-3 font-medium">Verarbeitungszweck</td><td className="px-4 py-3">Wird Profiling betrieben? Scoring? Automatisierte Entscheidungen?</td><td className="px-4 py-3">Art. 22 DSGVO schuetzt vor vollautomatischen Entscheidungen</td></tr>
            <tr><td className="px-4 py-3 font-medium">Modellnutzung</td><td className="px-4 py-3">Wird das Modell nur genutzt (Inference) oder mit Nutzerdaten trainiert (Fine-Tuning)?</td><td className="px-4 py-3">Training mit personenbezogenen Daten erfordert besondere Rechtsgrundlage</td></tr>
            <tr><td className="px-4 py-3 font-medium">Automatisierungsgrad</td><td className="px-4 py-3">Assistenzsystem, teil- oder vollautomatisch?</td><td className="px-4 py-3">Vollautomatische Systeme unterliegen strengeren Auflagen</td></tr>
            <tr><td className="px-4 py-3 font-medium">Datenspeicherung</td><td className="px-4 py-3">Wie lange werden Daten gespeichert? Wo?</td><td className="px-4 py-3">DSGVO Art. 5: Speicherbegrenzung / Zweckbindung</td></tr>
            <tr><td className="px-4 py-3 font-medium">Hosting-Standort</td><td className="px-4 py-3">EU, USA, oder anderswo?</td><td className="px-4 py-3">Drittlandtransfers erfordern zusaetzliche Garantien (SCC, DPF)</td></tr>
            <tr><td className="px-4 py-3 font-medium">Branche</td><td className="px-4 py-3">Gesundheit, Finanzen, Bildung, Automotive, ...?</td><td className="px-4 py-3">Bestimmte Branchen unterliegen zusaetzlichen Regulierungen</td></tr>
            <tr><td className="px-4 py-3 font-medium">Menschliche Aufsicht</td><td className="px-4 py-3">Gibt es einen Human-in-the-Loop?</td><td className="px-4 py-3">AI Act fordert menschliche Aufsicht fuer Hochrisiko-KI</td></tr>
          </tbody>
        </table>
      </div>

      <h3>4.2 Die Pruefregeln (Policy Engine)</h3>
      <p>
        Die Antworten des Fragebogens werden gegen ein <strong>Regelwerk von ueber 45 Regeln</strong>
        geprueft. Jede Regel ist in einer YAML-Datei definiert. Die Regeln sind in <strong>10 Kategorien</strong> organisiert:
      </p>
      <div className="not-prose my-4 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">Kategorie</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Regel-IDs</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Prueft</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Beispiel</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            <tr><td className="px-4 py-3 font-medium">A. Datenklassifikation</td><td className="px-4 py-3">R-001 bis R-006</td><td className="px-4 py-3">Welche Daten werden verarbeitet?</td><td className="px-4 py-3">R-001: Werden personenbezogene Daten verarbeitet? &rarr; +10 Risiko</td></tr>
            <tr><td className="px-4 py-3 font-medium">B. Zweck &amp; Kontext</td><td className="px-4 py-3">R-010 bis R-013</td><td className="px-4 py-3">Warum und wie werden Daten genutzt?</td><td className="px-4 py-3">R-011: Profiling? &rarr; DSFA empfohlen</td></tr>
            <tr><td className="px-4 py-3 font-medium">C. Automatisierung</td><td className="px-4 py-3">R-020 bis R-025</td><td className="px-4 py-3">Wie stark ist die Automatisierung?</td><td className="px-4 py-3">R-023: Vollautomatisch? &rarr; Art. 22 Risiko</td></tr>
            <tr><td className="px-4 py-3 font-medium">D. Training vs. Nutzung</td><td className="px-4 py-3">R-030 bis R-035</td><td className="px-4 py-3">Wird das Modell trainiert?</td><td className="px-4 py-3">R-035: Training + Art. 9-Daten? &rarr; BLOCK</td></tr>
            <tr><td className="px-4 py-3 font-medium">E. Speicherung</td><td className="px-4 py-3">R-040 bis R-042</td><td className="px-4 py-3">Wie lange werden Daten gespeichert?</td><td className="px-4 py-3">R-041: Unbegrenzte Speicherung? &rarr; WARN</td></tr>
            <tr><td className="px-4 py-3 font-medium">F. Hosting</td><td className="px-4 py-3">R-050 bis R-052</td><td className="px-4 py-3">Wo werden Daten gehostet?</td><td className="px-4 py-3">R-051: Hosting in USA? &rarr; SCC/DPF pruefen</td></tr>
            <tr><td className="px-4 py-3 font-medium">G. Transparenz</td><td className="px-4 py-3">R-060 bis R-062</td><td className="px-4 py-3">Werden Nutzer informiert?</td><td className="px-4 py-3">R-060: Keine Offenlegung? &rarr; AI Act Verstoss</td></tr>
            <tr><td className="px-4 py-3 font-medium">H. Branchenspezifisch</td><td className="px-4 py-3">R-070 bis R-074</td><td className="px-4 py-3">Gelten Sonderregeln fuer die Branche?</td><td className="px-4 py-3">R-070: Gesundheitsbranche? &rarr; zusaetzliche Anforderungen</td></tr>
            <tr><td className="px-4 py-3 font-medium">I. Aggregation</td><td className="px-4 py-3">R-090 bis R-092</td><td className="px-4 py-3">Meta-Regeln ueber andere Regeln</td><td className="px-4 py-3">R-090: Zu viele WARN-Regeln? &rarr; Gesamtrisiko erhoeht</td></tr>
            <tr><td className="px-4 py-3 font-medium">J. Erklaerung</td><td className="px-4 py-3">R-100</td><td className="px-4 py-3">Warum hat das System so entschieden?</td><td className="px-4 py-3">Automatisch generierte Begruendung</td></tr>
          </tbody>
        </table>
      </div>

      <InfoBox type="info" title="Warum YAML-Regeln statt Code?">
        Die Regeln sind bewusst in YAML-Dateien definiert: (1) Sie sind fuer Nicht-Programmierer
        lesbar und damit <strong>auditierbar</strong>. (2) Sie koennen <strong>versioniert</strong>
        werden -- wenn sich ein Gesetz aendert, wird die Regelaenderung im Versionsverlauf sichtbar.
      </InfoBox>

      <h3>4.3 Das Ergebnis: Die Compliance-Bewertung</h3>
      <div className="not-prose my-4 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">Ergebnis</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Beschreibung</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            <tr>
              <td className="px-4 py-3 font-medium">Machbarkeit</td>
              <td className="px-4 py-3">
                <span className="inline-block px-2 py-0.5 rounded bg-green-100 text-green-800 text-xs font-bold mr-1">YES</span>
                <span className="inline-block px-2 py-0.5 rounded bg-yellow-100 text-yellow-800 text-xs font-bold mr-1">CONDITIONAL</span>
                <span className="inline-block px-2 py-0.5 rounded bg-red-100 text-red-800 text-xs font-bold">NO</span>
              </td>
            </tr>
            <tr><td className="px-4 py-3 font-medium">Risikoscore</td><td className="px-4 py-3">0-100 Punkte. Je hoeher, desto mehr Massnahmen sind erforderlich.</td></tr>
            <tr><td className="px-4 py-3 font-medium">Risikostufe</td><td className="px-4 py-3">MINIMAL / LOW / MEDIUM / HIGH / UNACCEPTABLE</td></tr>
            <tr><td className="px-4 py-3 font-medium">Ausgeloeste Regeln</td><td className="px-4 py-3">Liste aller Regeln, die angeschlagen haben, mit Schweregrad und Gesetzesreferenz</td></tr>
            <tr><td className="px-4 py-3 font-medium">Erforderliche Controls</td><td className="px-4 py-3">Konkrete Massnahmen, die umgesetzt werden muessen</td></tr>
            <tr><td className="px-4 py-3 font-medium">DSFA erforderlich?</td><td className="px-4 py-3">Ob eine Datenschutz-Folgenabschaetzung nach Art. 35 DSGVO durchgefuehrt werden muss</td></tr>
          </tbody>
        </table>
      </div>

      <CodeBlock language="text" filename="Beispiel: Bewertung eines Chatbots mit Kundendaten">
{`Anwendungsfall: "Chatbot fuer Kundenservice mit Zugriff auf Bestellhistorie"

Machbarkeit:       CONDITIONAL (bedingt zulaessig)
Risikoscore:       35/100 (LOW)

Ausgeloeste Regeln:
  R-001  WARN  Personenbezogene Daten werden verarbeitet          (Art. 6 DSGVO)
  R-010  INFO  Verarbeitungszweck: Kundenservice                  (Art. 5 DSGVO)
  R-060  WARN  Nutzer muessen ueber KI-Nutzung informiert werden  (AI Act Art. 52)

Erforderliche Controls:
  C_EXPLICIT_CONSENT   Einwilligung fuer Chatbot-Nutzung einholen
  C_TRANSPARENCY       Hinweis "Sie sprechen mit einer KI"
  C_DATA_MINIMIZATION  Nur notwendige Bestelldaten abrufen

DSFA erforderlich:     Nein (Risikoscore unter 40)
Eskalation:            E0 (keine manuelle Pruefung noetig)`}
      </CodeBlock>
    </>
  )
}