breakpilot-pwa/developer-portal/app/sdk/consent/security/page.tsx

'use client'

import React from 'react'
import { SDKDocsSidebar } from '@/components/SDKDocsSidebar'
import { Shield, Lock, Eye, Database, Key, AlertTriangle, CheckCircle } from 'lucide-react'

function SecurityCard({
  title,
  description,
  icon: Icon,
  items,
}: {
  title: string
  description: string
  icon: React.ComponentType<{ className?: string }>
  items: string[]
}) {
  return (
    <div className="bg-white rounded-xl border border-gray-200 p-6">
      <div className="flex items-start gap-4">
        <div className="w-10 h-10 rounded-lg bg-violet-100 flex items-center justify-center shrink-0">
          <Icon className="w-5 h-5 text-violet-600" />
        </div>
        <div>
          <h3 className="font-semibold text-gray-900">{title}</h3>
          <p className="text-sm text-gray-600 mt-1">{description}</p>
          <ul className="mt-3 space-y-1">
            {items.map((item, i) => (
              <li key={i} className="flex items-center gap-2 text-sm text-gray-600">
                <CheckCircle className="w-4 h-4 text-green-500 shrink-0" />
                {item}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  )
}

export default function SecurityPage() {
  return (
    <div className="min-h-screen bg-gray-50 flex">
      <SDKDocsSidebar />

      <main className="flex-1 ml-64">
        <div className="max-w-4xl mx-auto px-8 py-12">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Sicherheit & Compliance</h1>
          <p className="text-lg text-gray-600 mb-8">
            Best Practices fuer sichere Implementierung und DSGVO-konforme Nutzung des Consent SDK.
          </p>

          {/* Security Features */}
          <section className="mb-12">
            <h2 className="text-xl font-semibold text-gray-900 mb-6">Sicherheits-Features</h2>
            <div className="grid gap-4">
              <SecurityCard
                title="Datenverschluesselung"
                description="Alle Daten werden verschluesselt uebertragen und gespeichert."
                icon={Lock}
                items={[
                  'TLS 1.3 fuer alle API-Kommunikation',
                  'HMAC-Signatur fuer lokale Storage-Integritaet',
                  'Keine Klartextspeicherung sensibler Daten',
                ]}
              />

              <SecurityCard
                title="Datenschutzkonformes Fingerprinting"
                description="Anonymisiertes Fingerprinting ohne invasive Techniken."
                icon={Eye}
                items={[
                  'Kein Canvas/WebGL/Audio Fingerprinting',
                  'Nur anonymisierte Browser-Eigenschaften',
                  'SHA-256 Hash der Komponenten',
                  'Nicht eindeutig identifizierend',
                ]}
              />

              <SecurityCard
                title="Sichere Speicherung"
                description="Lokale Speicherung mit Manipulationsschutz."
                icon={Database}
                items={[
                  'Signierte localStorage-Eintraege',
                  'Automatische Signaturverifikation',
                  'HttpOnly Cookies fuer SSR',
                  'SameSite=Lax gegen CSRF',
                ]}
              />

              <SecurityCard
                title="API-Sicherheit"
                description="Sichere Backend-Kommunikation."
                icon={Key}
                items={[
                  'Request-Signierung mit Timestamp',
                  'Credentials-Include fuer Session-Cookies',
                  'CORS-Konfiguration erforderlich',
                  'Rate-Limiting auf Server-Seite',
                ]}
              />
            </div>
          </section>

          {/* DSGVO Compliance */}
          <section className="mb-12">
            <h2 className="text-xl font-semibold text-gray-900 mb-6">DSGVO Compliance</h2>

            <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                      DSGVO Artikel
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                      Anforderung
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                      SDK-Unterstuetzung
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-200">
                  <tr>
                    <td className="px-6 py-4 text-sm font-medium text-gray-900">Art. 6</td>
                    <td className="px-6 py-4 text-sm text-gray-600">Rechtmaessigkeit der Verarbeitung</td>
                    <td className="px-6 py-4">
                      <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">
                        Vollstaendig
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td className="px-6 py-4 text-sm font-medium text-gray-900">Art. 7</td>
                    <td className="px-6 py-4 text-sm text-gray-600">Bedingungen fuer Einwilligung</td>
                    <td className="px-6 py-4">
                      <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">
                        Vollstaendig
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td className="px-6 py-4 text-sm font-medium text-gray-900">Art. 13/14</td>
                    <td className="px-6 py-4 text-sm text-gray-600">Informationspflichten</td>
                    <td className="px-6 py-4">
                      <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">
                        Vollstaendig
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td className="px-6 py-4 text-sm font-medium text-gray-900">Art. 17</td>
                    <td className="px-6 py-4 text-sm text-gray-600">Recht auf Loeschung</td>
                    <td className="px-6 py-4">
                      <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">
                        Vollstaendig
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td className="px-6 py-4 text-sm font-medium text-gray-900">Art. 20</td>
                    <td className="px-6 py-4 text-sm text-gray-600">Datenportabilitaet</td>
                    <td className="px-6 py-4">
                      <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">
                        Vollstaendig
                      </span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </section>

          {/* TTDSG Compliance */}
          <section className="mb-12">
            <h2 className="text-xl font-semibold text-gray-900 mb-6">TTDSG Compliance</h2>
            <div className="bg-white rounded-xl border border-gray-200 p-6">
              <div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center shrink-0">
                  <Shield className="w-5 h-5 text-blue-600" />
                </div>
                <div>
                  <h3 className="font-semibold text-gray-900">§ 25 TTDSG - Schutz der Privatsphaere</h3>
                  <p className="text-sm text-gray-600 mt-1">
                    Das SDK erfuellt alle Anforderungen des § 25 TTDSG (Telemediengesetz):
                  </p>
                  <ul className="mt-3 space-y-2">
                    <li className="flex items-start gap-2 text-sm text-gray-600">
                      <CheckCircle className="w-4 h-4 text-green-500 shrink-0 mt-0.5" />
                      <span>
                        <strong>Einwilligung vor Speicherung:</strong> Cookies und localStorage werden erst nach
                        Einwilligung gesetzt (ausser technisch notwendige).
                      </span>
                    </li>
                    <li className="flex items-start gap-2 text-sm text-gray-600">
                      <CheckCircle className="w-4 h-4 text-green-500 shrink-0 mt-0.5" />
                      <span>
                        <strong>Informierte Einwilligung:</strong> Klare Kategorisierung und Beschreibung
                        aller Cookies und Tracker.
                      </span>
                    </li>
                    <li className="flex items-start gap-2 text-sm text-gray-600">
                      <CheckCircle className="w-4 h-4 text-green-500 shrink-0 mt-0.5" />
                      <span>
                        <strong>Widerrufsrecht:</strong> Jederzeit widerrufbare Einwilligung mit einem Klick.
                      </span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </section>

          {/* Best Practices */}
          <section className="mb-12">
            <h2 className="text-xl font-semibold text-gray-900 mb-6">Best Practices</h2>

            <div className="space-y-4">
              <div className="bg-green-50 border border-green-200 rounded-xl p-4">
                <h3 className="font-medium text-green-900 flex items-center gap-2">
                  <CheckCircle className="w-5 h-5" />
                  Empfohlen
                </h3>
                <ul className="mt-2 space-y-1 text-sm text-green-800">
                  <li>• HTTPS fuer alle API-Aufrufe verwenden</li>
                  <li>• Consent-Banner vor dem Laden von Third-Party Scripts anzeigen</li>
                  <li>• Alle Kategorien klar und verstaendlich beschreiben</li>
                  <li>• Ablehnen-Button gleichwertig zum Akzeptieren-Button darstellen</li>
                  <li>• Consent-Aenderungen serverseitig protokollieren</li>
                  <li>• Regelmaessige Ueberpruefung der Consent-Gultigkeit (recheckAfterDays)</li>
                </ul>
              </div>

              <div className="bg-red-50 border border-red-200 rounded-xl p-4">
                <h3 className="font-medium text-red-900 flex items-center gap-2">
                  <AlertTriangle className="w-5 h-5" />
                  Vermeiden
                </h3>
                <ul className="mt-2 space-y-1 text-sm text-red-800">
                  <li>• Dark Patterns (versteckte Ablehnen-Buttons)</li>
                  <li>• Pre-checked Consent-Optionen</li>
                  <li>• Tracking vor Einwilligung</li>
                  <li>• Cookie-Walls ohne echte Alternative</li>
                  <li>• Unklare oder irrefuehrende Kategoriebezeichnungen</li>
                </ul>
              </div>
            </div>
          </section>

          {/* Audit Trail */}
          <section>
            <h2 className="text-xl font-semibold text-gray-900 mb-6">Audit Trail</h2>
            <div className="bg-white rounded-xl border border-gray-200 p-6">
              <p className="text-gray-600 mb-4">
                Das SDK speichert fuer jeden Consent-Vorgang revisionssichere Daten:
              </p>
              <div className="bg-gray-50 rounded-lg p-4 font-mono text-sm">
                <pre className="text-gray-700">
{`{
  "consentId": "consent_abc123...",
  "timestamp": "2024-01-15T10:30:00.000Z",
  "categories": {
    "essential": true,
    "analytics": true,
    "marketing": false
  },
  "metadata": {
    "userAgent": "Mozilla/5.0...",
    "language": "de-DE",
    "platform": "web",
    "screenResolution": "1920x1080"
  },
  "signature": "sha256=...",
  "version": "1.0.0"
}`}
                </pre>
              </div>
              <p className="text-sm text-gray-500 mt-4">
                Diese Daten werden sowohl lokal als auch auf dem Server gespeichert und koennen
                jederzeit fuer Audits exportiert werden.
              </p>
            </div>
          </section>
        </div>
      </main>
    </div>
  )
}