breakpilot-compliance/developer-portal/app/sdk/consent/cookie-banner/integration/page.tsx

'use client'

import React from 'react'
import { SDKDocsSidebar } from '@/components/SDKDocsSidebar'

export default function IntegrationGuidePage() {
  return (
    <div className="flex min-h-screen bg-white">
      <SDKDocsSidebar />
      <main className="flex-1 ml-64 p-8 max-w-4xl">
        <div className="prose prose-gray max-w-none">
          <h1>Cookie-Banner Integration Guide</h1>
          <p className="text-lg text-gray-600">
            Integrieren Sie den BreakPilot Cookie-Banner in 3 Schritten auf Ihrer Website.
            DSGVO-konform, mit Script-Blocking und Google Consent Mode v2.
          </p>

          <div className="bg-violet-50 border border-violet-200 rounded-xl p-4 my-6">
            <h4 className="text-violet-900 mt-0">Unser Banner ist rechtlich geprueft</h4>
            <p className="text-violet-700 text-sm mb-0">
              Der Banner erfuellt automatisch alle 8 Compliance-Checks die unser Agent prueft:
              Impressum-Link, DSE-Link, gleichwertige Buttons, keine vorausgewaehlten Checkboxen,
              Settings-Reopen, kein Dark Pattern, Google Consent Mode v2.
            </p>
          </div>

          <h2>Schritt 1: Script-Tag einbinden</h2>
          <p>Fuegen Sie eine einzige Zeile in den <code>&lt;head&gt;</code> Ihrer Website ein:</p>
          <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
{`<!-- BreakPilot Cookie-Banner -->
<script src="https://sdk.breakpilot.ai/cookie-banner.js"
        data-tenant="IHRE-TENANT-ID"
        data-language="de">
</script>`}
          </pre>

          <h2>Schritt 2: Tracking-Scripts blockieren</h2>
          <p>
            Aendern Sie den <code>type</code> Ihrer Tracking-Scripts von
            <code>text/javascript</code> zu <code>text/plain</code> und fuegen Sie
            das <code>data-cookie-category</code> Attribut hinzu:
          </p>
          <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
{`<!-- VORHER (laedt sofort — DSGVO-Verstoss!): -->
<script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script>

<!-- NACHHER (laedt erst nach Consent): -->
<script type="text/plain"
        data-cookie-category="statistics"
        src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX">
</script>`}
          </pre>

          <h2>Schritt 3: Kategorien zuordnen</h2>
          <table className="min-w-full">
            <thead>
              <tr>
                <th>Kategorie</th>
                <th>data-cookie-category</th>
                <th>Beispiele</th>
              </tr>
            </thead>
            <tbody>
              <tr><td>Notwendig</td><td><code>necessary</code></td><td>Session-Cookies, CSRF-Token</td></tr>
              <tr><td>Statistik</td><td><code>statistics</code></td><td>Google Analytics, Matomo, Hotjar</td></tr>
              <tr><td>Marketing</td><td><code>marketing</code></td><td>Facebook Pixel, Google Ads, LinkedIn</td></tr>
              <tr><td>Funktional</td><td><code>functional</code></td><td>Chat-Widget, Spracheinstellung</td></tr>
            </tbody>
          </table>

          <h2>Schritt 4: Fertig — automatische Features</h2>
          <ul>
            <li><strong>Google Consent Mode v2</strong> — automatisch integriert, keine zusaetzliche Konfiguration</li>
            <li><strong>Impressum + DSE Links</strong> — im Banner enthalten</li>
            <li><strong>Settings-Reopen</strong> — schwebendes &quot;Cookie-Einstellungen&quot; Icon</li>
            <li><strong>Gleichwertige Buttons</strong> — Akzeptieren und Ablehnen gleich gross</li>
            <li><strong>Server-seitige Speicherung</strong> — Consent wird revisionssicher gespeichert</li>
          </ul>

          <h2>API-Integration (optional)</h2>
          <p>Fuer programmatische Kontrolle:</p>
          <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
{`// Consent-Status abfragen
if (window.CookieConsent.hasConsent('statistics')) {
  // Analytics-Code ausfuehren
}

// Banner erneut oeffnen
window.CookieConsent.show();

// Consent programmatisch setzen
window.CookieConsent.saveConsent({
  necessary: true,
  statistics: false,
  marketing: false,
  functional: true,
});`}
          </pre>
        </div>
      </main>
    </div>
  )
}