'use client'

import React from 'react'
import Link from 'next/link'
import { SDKDocsSidebar } from '@/components/SDKDocsSidebar'
import { FileCode, Shield, Zap, CheckCircle } from 'lucide-react'

const PAGES = [
  {
    title: 'Integration Guide',
    href: '/sdk/consent/cookie-banner/integration',
    icon: <FileCode className="w-6 h-6" />,
    desc: 'Banner in 3 Schritten auf Ihrer Website einbinden. Script-Tag, Script-Blocking, fertig.',
  },
  {
    title: 'Google Consent Mode v2',
    href: '/sdk/consent/cookie-banner/google-consent-mode',
    icon: <Zap className="w-6 h-6" />,
    desc: 'Pflicht seit Maerz 2024 fuer Google Services in EEA. Automatisch integriert.',
  },
  {
    title: 'Script Blocking',
    href: '/sdk/consent/cookie-banner/script-blocking',
    icon: <Shield className="w-6 h-6" />,
    desc: 'Tracking-Scripts erst nach Consent laden. Code-Beispiele fuer GA, FB, Hotjar.',
  },
  {
    title: 'Compliance Checklist',
    href: '/sdk/consent/cookie-banner/checklist',
    icon: <CheckCircle className="w-6 h-6" />,
    desc: '12 Punkte die Ihr Banner erfuellen muss. 9 davon automatisch.',
  },
]

export default function CookieBannerOverviewPage() {
  return (
    <div className="flex min-h-screen bg-white">
      <SDKDocsSidebar />
      <main className="flex-1 ml-64 p-8 max-w-4xl">
        <h1 className="text-3xl font-bold text-gray-900">Cookie-Banner</h1>
        <p className="text-lg text-gray-600 mt-2 mb-8">
          Rechtlich korrekter Cookie-Banner fuer Ihre Website — DSGVO-konform,
          mit Script-Blocking, Google Consent Mode v2 und automatischer Compliance-Pruefung.
        </p>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {PAGES.map(page => (
            <Link key={page.href} href={page.href}
              className="block p-6 rounded-xl border border-gray-200 hover:border-violet-300 hover:shadow-md transition-all group">
              <div className="flex items-start gap-4">
                <div className="p-2 rounded-lg bg-violet-50 text-violet-600 group-hover:bg-violet-100">
                  {page.icon}
                </div>
                <div>
                  <h3 className="font-semibold text-gray-900 group-hover:text-violet-700">{page.title}</h3>
                  <p className="text-sm text-gray-500 mt-1">{page.desc}</p>
                </div>
              </div>
            </Link>
          ))}
        </div>
      </main>
    </div>
  )
}