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

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

export function EscalationControlsSection() {
  return (
    <>
      <h2 id="eskalation">5. Das Eskalations-System: Wann Menschen entscheiden</h2>
      <p>
        Nicht jede Bewertung ist eindeutig. Fuer heikle Faelle gibt es ein abgestuftes
        Eskalations-System, das sicherstellt, dass die richtigen Menschen die endgueltige
        Entscheidung treffen.
      </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">Stufe</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Wann?</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Wer prueft?</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Frist (SLA)</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 className="bg-green-50"><td className="px-4 py-3 font-bold text-green-800">E0</td><td className="px-4 py-3">Nur INFO-Regeln, Risiko &lt; 20</td><td className="px-4 py-3">Niemand (automatisch freigegeben)</td><td className="px-4 py-3">--</td><td className="px-4 py-3">Spam-Filter ohne personenbezogene Daten</td></tr>
            <tr className="bg-yellow-50"><td className="px-4 py-3 font-bold text-yellow-800">E1</td><td className="px-4 py-3">WARN-Regeln, Risiko 20-39</td><td className="px-4 py-3">Teamleiter</td><td className="px-4 py-3">24 Stunden</td><td className="px-4 py-3">Chatbot mit Kundendaten</td></tr>
            <tr className="bg-orange-50"><td className="px-4 py-3 font-bold text-orange-800">E2</td><td className="px-4 py-3">Art. 9-Daten ODER Risiko 40-59 ODER DSFA empfohlen</td><td className="px-4 py-3">Datenschutzbeauftragter (DSB)</td><td className="px-4 py-3">8 Stunden</td><td className="px-4 py-3">KI-System, das Gesundheitsdaten verarbeitet</td></tr>
            <tr className="bg-red-50"><td className="px-4 py-3 font-bold text-red-800">E3</td><td className="px-4 py-3">BLOCK-Regel ODER Risiko &ge; 60 ODER Art. 22-Risiko</td><td className="px-4 py-3">DSB + Rechtsabteilung</td><td className="px-4 py-3">4 Stunden</td><td className="px-4 py-3">Vollautomatische Kreditentscheidung</td></tr>
          </tbody>
        </table>
      </div>

      <h2 id="controls">6. Controls, Nachweise und Risiken</h2>

      <h3>6.1 Was sind Controls?</h3>
      <p>
        Ein <strong>Control</strong> ist eine konkrete Massnahme, die eine Organisation umsetzt,
        um ein Compliance-Risiko zu beherrschen. Es gibt drei Arten:
      </p>
      <ul>
        <li><strong>Technische Controls:</strong> Verschluesselung, Zugangskontrollen, Firewalls, Pseudonymisierung</li>
        <li><strong>Organisatorische Controls:</strong> Schulungen, Richtlinien, Verantwortlichkeiten, Audits</li>
        <li><strong>Physische Controls:</strong> Zutrittskontrolle zu Serverraeumen, Schliesssysteme</li>
      </ul>
      <p>
        Der Compliance Hub verwaltet einen <strong>Katalog von ueber 100 vordefinierten Controls</strong>,
        die in 9 Domaenen organisiert sind:
      </p>
      <div className="not-prose my-4">
        <div className="grid grid-cols-3 gap-2">
          {[
            { code: 'AC', name: 'Zugriffsmanagement', desc: 'Wer darf was?' },
            { code: 'DP', name: 'Datenschutz', desc: 'Schutz personenbezogener Daten' },
            { code: 'NS', name: 'Netzwerksicherheit', desc: 'Sichere Kommunikation' },
            { code: 'IR', name: 'Incident Response', desc: 'Reaktion auf Sicherheitsvorfaelle' },
            { code: 'BC', name: 'Business Continuity', desc: 'Geschaeftskontinuitaet' },
            { code: 'VM', name: 'Vendor Management', desc: 'Dienstleister-Steuerung' },
            { code: 'AM', name: 'Asset Management', desc: 'Verwaltung von IT-Werten' },
            { code: 'CR', name: 'Kryptographie', desc: 'Verschluesselung & Schluessel' },
            { code: 'PS', name: 'Physische Sicherheit', desc: 'Gebaeude & Hardware' },
          ].map(d => (
            <div key={d.code} className="border border-gray-200 rounded-lg p-3 text-sm">
              <div className="font-bold text-blue-600">{d.code}</div>
              <div className="font-medium">{d.name}</div>
              <div className="text-gray-500 text-xs">{d.desc}</div>
            </div>
          ))}
        </div>
      </div>

      <h3>6.2 Wie Controls mit Gesetzen verknuepft sind</h3>
      <CodeBlock language="text" filename="Beispiel: Control-Mapping">
{`Control: AC-01 (Zugriffskontrolle)
├── DSGVO Art. 32    → "Sicherheit der Verarbeitung"
├── NIS2 Art. 21     → "Massnahmen zum Management von Cyberrisiken"
└── ISO 27001 A.9    → "Zugangskontrolle"

Control: DP-03 (Datenverschluesselung)
├── DSGVO Art. 32    → "Verschluesselung personenbezogener Daten"
└── NIS2 Art. 21     → "Einsatz von Kryptographie"`}
      </CodeBlock>

      <h3>6.3 Evidence (Nachweise)</h3>
      <p>Nachweis-Typen, die das System verwaltet:</p>
      <ul>
        <li><strong>Zertifikate:</strong> ISO 27001-Zertifikat, SOC2-Report</li>
        <li><strong>Richtlinien:</strong> Interne Datenschutzrichtlinie, Passwort-Policy</li>
        <li><strong>Audit-Berichte:</strong> Ergebnisse interner oder externer Pruefungen</li>
        <li><strong>Screenshots / Konfigurationen:</strong> Nachweis technischer Umsetzung</li>
      </ul>
      <p>Jeder Nachweis hat ein <strong>Ablaufdatum</strong>. Das System warnt automatisch, wenn Nachweise bald ablaufen.</p>

      <h3>6.4 Risikobewertung</h3>
      <p>
        Risiken werden in einer <strong>5x5-Risikomatrix</strong> dargestellt. Die beiden Achsen sind
        Eintrittswahrscheinlichkeit und Auswirkung. Aus der Kombination ergibt sich die Risikostufe:
        <em> Minimal</em>, <em>Low</em>, <em>Medium</em>, <em>High</em> oder <em>Critical</em>.
      </p>
    </>
  )
}