'use client'

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

export default function GoogleConsentModePage() {
  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>Google Consent Mode v2</h1>
          <p className="text-lg text-gray-600">
            Seit Maerz 2024 ist Google Consent Mode v2 Pflicht fuer alle Websites
            die Google Analytics oder Google Ads im EWR nutzen.
          </p>

          <div className="bg-red-50 border border-red-200 rounded-xl p-4 my-6">
            <h4 className="text-red-900 mt-0">Pflicht seit Maerz 2024</h4>
            <p className="text-red-700 text-sm mb-0">
              Ohne Google Consent Mode v2 verlieren Sie Messdaten von EWR-Besuchern.
              Google Tags funktionieren moeglicherweise nicht mehr korrekt.
            </p>
          </div>

          <h2>Was ist Google Consent Mode?</h2>
          <p>
            Google Consent Mode passt das Verhalten von Google Tags (Analytics, Ads)
            automatisch an die Consent-Entscheidung des Nutzers an. Statt Tags komplett
            zu blockieren, sendet Consent Mode anonymisierte Pings die Google fuer
            Modellierung und Conversion-Tracking nutzen kann.
          </p>

          <h2>Automatische Integration</h2>
          <p>
            Der BreakPilot Cookie-Banner integriert Google Consent Mode v2 <strong>automatisch</strong>.
            Sie muessen nichts zusaetzlich konfigurieren.
          </p>

          <h3>Was passiert im Hintergrund</h3>

          <p><strong>Beim Laden der Seite (vor Banner):</strong></p>
          <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
{`// Automatisch vom Banner gesetzt — alles "denied"
gtag('consent', 'default', {
  analytics_storage: 'denied',
  ad_storage: 'denied',
  ad_user_data: 'denied',
  ad_personalization: 'denied',
  functionality_storage: 'granted',
  security_storage: 'granted',
});`}
          </pre>

          <p><strong>Nach Consent-Entscheidung des Nutzers:</strong></p>
          <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
{`// Automatisch nach Klick auf "Akzeptieren" oder "Auswahl speichern"
gtag('consent', 'update', {
  analytics_storage: 'granted',  // Wenn "Statistik" akzeptiert
  ad_storage: 'granted',         // Wenn "Marketing" akzeptiert
  ad_user_data: 'granted',
  ad_personalization: 'granted',
});`}
          </pre>

          <h2>Consent-Parameter Mapping</h2>
          <table className="min-w-full">
            <thead>
              <tr>
                <th>Google Parameter</th>
                <th>Banner-Kategorie</th>
                <th>Beschreibung</th>
              </tr>
            </thead>
            <tbody>
              <tr><td><code>analytics_storage</code></td><td>Statistik</td><td>Google Analytics Cookies</td></tr>
              <tr><td><code>ad_storage</code></td><td>Marketing</td><td>Werbe-Cookies (Google Ads)</td></tr>
              <tr><td><code>ad_user_data</code></td><td>Marketing</td><td>Nutzerdaten fuer Werbung</td></tr>
              <tr><td><code>ad_personalization</code></td><td>Marketing</td><td>Personalisierte Werbung</td></tr>
              <tr><td><code>functionality_storage</code></td><td>Notwendig</td><td>Immer granted</td></tr>
              <tr><td><code>security_storage</code></td><td>Notwendig</td><td>Immer granted</td></tr>
            </tbody>
          </table>

          <h2>Vorteile</h2>
          <ul>
            <li>Kein Datenverlust — Google modelliert fehlende Daten</li>
            <li>DSGVO-konform — Tags feuern nur nach Consent</li>
            <li>Automatisch — keine manuelle gtag()-Konfiguration noetig</li>
            <li>EWR-konform — erfuellt Google-Anforderungen seit Maerz 2024</li>
          </ul>
        </div>
      </main>
    </div>
  )
}