breakpilot-compliance/admin-compliance/app/sdk/agent/_components/ComplianceFAQ.tsx

'use client'

import React, { useState } from 'react'

interface FAQItem {
  q: string
  a: string
}

const FAQ_ITEMS: FAQItem[] = [
  {
    q: "Was passiert wenn ein Unternehmen wegen unzureichender Datenschutzerklaerung oder Cookie-Richtlinie verklagt wird?",
    a: `Es gibt vier Durchsetzungswege:

**1. Bussgelder durch Aufsichtsbehoerden (Art. 83 DSGVO)**
Aufsichtsbehoerden pruefen von Amts wegen oder auf Beschwerde — kein Klaeger noetig. Bussgelder bis 20 Mio. EUR oder 4% des Jahresumsatzes. Beispiele: CNIL gegen Google (150 Mio. EUR), Facebook (60 Mio. EUR), H&M (35 Mio. EUR). Auch KMU sind betroffen — der LfDI Baden-Wuerttemberg hat Bussgelder ab 10.000 EUR verhaengt.

**2. Abmahnungen durch Verbraucherschutzverbaende**
Verbaende wie vzbv oder DUH koennen ohne individuellen Schaden klagen (§2 UKlaG). Das ist der groesste praktische Druck: Unterlassungsklage + Anwaltskosten (5.000-20.000 EUR pro Fall). Seit EuGH C-319/20 (Meta/vzbv) duerfen Verbaende DSGVO-Verstoesse auch ohne Betroffenenauftrag klagen.

**3. Individueller Schadensersatz (Art. 82 DSGVO)**
Seit EuGH C-300/21 (Oesterreichische Post) genuegt bereits der "Kontrollverlust" ueber Daten als immaterieller Schaden — kein messbarer finanzieller Schaden noetig. Typisch: 100-5.000 EUR pro Betroffenem. Legaltech-Firmen wie NOYB buendeln Massenverfahren.

**4. Wettbewerber-Abmahnungen (UWG)**
Seit 2021 eingeschraenkt, aber Impressums-Maengel oder fehlende Cookie-Einwilligung bleiben abmahnfaehig.

Die Aufsichtsbehoerden erhalten ueber 10.000 Beschwerden pro Jahr. Eine Beschwerde einzureichen ist kostenlos und mit einem Klick moeglich.`,
  },
  {
    q: "Wie funktioniert die Dokumentenpruefung?",
    a: `Die Pruefung laeuft in drei Schritten:

**1. Text-Extraktion** — Playwright laedt die Seite, expandiert Accordions/Tabs und extrahiert den vollstaendigen Text.

**2. Regex-Checks (138 Pruefpunkte)** — Zwei Ebenen: L1 prueft ob Pflichtangaben erwaehnt sind (z.B. "Verantwortlicher"), L2 prueft ob sie korrekt und vollstaendig sind (z.B. "Hat der Verantwortliche eine ladungsfaehige Anschrift mit PLZ?").

**3. LLM-Verifikation** — Jeder fehlgeschlagene Check wird von einem KI-Modell (Qwen) gegen den Originaltext gegengeprueft, um Fehlalarme zu eliminieren.

Das Ergebnis: Zwei Scores pro Dokument — Vollstaendigkeit (sind alle Pflichtangaben da?) und Korrektheit (sind sie richtig formuliert?). Jeder fehlende Punkt hat eine konkrete Handlungsanweisung mit Rechtsbezug.`,
  },
  {
    q: "Welche Dokumenttypen werden geprueft?",
    a: `Sieben Dokumenttypen mit jeweils eigener Checkliste:

- **Datenschutzinformation (DSI)** — Art. 13/14 DSGVO (31 Checks)
- **Cookie-Richtlinie** — §25 TDDDG (15 Checks)
- **Impressum** — §5 TMG / §18 MStV (16 Checks)
- **AGB** — §305ff BGB (21 Checks)
- **Widerrufsbelehrung** — §355 BGB (15 Checks)
- **Social Media DSE** — Art. 26 DSGVO Joint Controller (20 Checks)
- **DSFA** — Art. 35 DSGVO (18 Checks)

Sub-Sektionen (z.B. Cookie-Abschnitt innerhalb der DSI) werden automatisch erkannt und separat geprueft.`,
  },
  {
    q: "Wie zuverlaessig sind die Ergebnisse?",
    a: `Die Pruefung wurde gegen mehrere Ground-Truth-Websites validiert (IHK Konstanz, ETO Gruppe, BMW, Stadt Koeln, Sparkasse, Spiegel u.a.). Ergebnis: **0 False Positives** bei validierten Testfaellen — jeder rote Punkt ist ein echtes Finding.

Durch die LLM-Verifikation werden Regex-Fehlalarme (z.B. durch ungewoehnliche Formatierung oder Soft Hyphens im HTML) automatisch korrigiert. Trotzdem gilt: Das Tool ersetzt keine Rechtsberatung, sondern identifiziert Handlungsbedarf.`,
  },
  {
    q: "Was kostet ein Verstoss gegen die DSGVO in der Praxis?",
    a: `Bussgelder nach Art. 83 DSGVO staffeln sich in zwei Stufen:

- **Bis 10 Mio. EUR / 2% Umsatz**: Verstoesse gegen technische/organisatorische Pflichten (Art. 25, 28, 32)
- **Bis 20 Mio. EUR / 4% Umsatz**: Verstoesse gegen Grundsaetze, Betroffenenrechte, Drittlandtransfer

Typische Praxis-Bussgelder in Deutschland: 5.000-50.000 EUR fuer KMU, 100.000-1 Mio. EUR fuer groessere Unternehmen. Dazu kommen Anwaltskosten bei Abmahnungen (5.000-20.000 EUR pro Fall) und Reputationsschaden.`,
  },
]

export function ComplianceFAQ() {
  const [open, setOpen] = useState<number | null>(null)

  return (
    <div className="border border-gray-200 rounded-xl overflow-hidden">
      <div className="px-4 py-3 bg-gray-50 border-b border-gray-200">
        <h3 className="text-sm font-semibold text-gray-800">Haeufige Fragen</h3>
      </div>
      <div className="divide-y divide-gray-100">
        {FAQ_ITEMS.map((item, i) => (
          <div key={i}>
            <button
              onClick={() => setOpen(open === i ? null : i)}
              className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-gray-50 transition-colors"
            >
              <span className="text-sm font-medium text-gray-900 pr-4">{item.q}</span>
              <svg
                className={`w-4 h-4 text-gray-400 shrink-0 transition-transform ${open === i ? 'rotate-180' : ''}`}
                fill="none" stroke="currentColor" viewBox="0 0 24 24"
              >
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
              </svg>
            </button>
            {open === i && (
              <div className="px-4 pb-4 text-sm text-gray-600 prose prose-sm max-w-none">
                {item.a.split('\n\n').map((para, pi) => (
                  <p key={pi} className="mb-2 last:mb-0" dangerouslySetInnerHTML={{
                    __html: para
                      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                      .replace(/\n- /g, '<br/>• ')
                      .replace(/\n/g, '<br/>')
                  }} />
                ))}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}