'use client'

import Link from 'next/link'
import { useLanguage } from '@/lib/LanguageContext'
import { useTheme } from '@/lib/ThemeContext'
import { Footer } from '@/components/Footer'

export default function DatenschutzPage() {
  const { t } = useLanguage()
  const { isDark } = useTheme()

  return (
    <div className={`min-h-screen flex flex-col ${
      isDark
        ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800'
        : 'bg-gradient-to-br from-slate-100 via-blue-50 to-indigo-100'
    }`}>
      <div className="flex-1 p-8">
        <div className="max-w-4xl mx-auto">
          {/* Back Link */}
          <Link
            href="/"
            className={`inline-flex items-center gap-2 mb-8 transition-colors ${
              isDark ? 'text-white/60 hover:text-white' : 'text-slate-600 hover:text-slate-900'
            }`}
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
            {t('back_to_selection')}
          </Link>

          {/* Content Card */}
          <div className={`backdrop-blur-xl border rounded-3xl p-8 ${
            isDark
              ? 'bg-white/10 border-white/20'
              : 'bg-white/70 border-black/10 shadow-lg'
          }`}>
            <h1 className={`text-3xl font-bold mb-8 ${isDark ? 'text-white' : 'text-slate-900'}`}>
              {t('privacy')}
            </h1>

            <div className={`space-y-6 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>
              <section>
                <h2 className={`text-xl font-semibold mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  1. Datenschutz auf einen Blick
                </h2>
                <h3 className={`text-lg font-medium mb-2 ${isDark ? 'text-white/90' : 'text-slate-800'}`}>
                  Allgemeine Hinweise
                </h3>
                <p>
                  Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen
                  Daten passiert, wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen
                  Sie persönlich identifiziert werden können.
                </p>
              </section>

              <section>
                <h2 className={`text-xl font-semibold mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  2. Datenerfassung auf dieser Website
                </h2>
                <h3 className={`text-lg font-medium mb-2 ${isDark ? 'text-white/90' : 'text-slate-800'}`}>
                  Wer ist verantwortlich für die Datenerfassung?
                </h3>
                <p className="mb-4">
                  Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber.
                  Dessen Kontaktdaten können Sie dem Impressum dieser Website entnehmen.
                </p>

                <h3 className={`text-lg font-medium mb-2 ${isDark ? 'text-white/90' : 'text-slate-800'}`}>
                  Wie erfassen wir Ihre Daten?
                </h3>
                <p>
                  Ihre Daten werden zum einen dadurch erhoben, dass Sie uns diese mitteilen.
                  Andere Daten werden automatisch beim Besuch der Website durch unsere IT-Systeme erfasst.
                </p>
              </section>

              <section>
                <h2 className={`text-xl font-semibold mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  3. Ihre Rechte
                </h2>
                <p>
                  Sie haben jederzeit das Recht auf unentgeltliche Auskunft über Herkunft, Empfänger und Zweck
                  Ihrer gespeicherten personenbezogenen Daten. Sie haben außerdem ein Recht, die Berichtigung
                  oder Löschung dieser Daten zu verlangen.
                </p>
              </section>

              <section>
                <h2 className={`text-xl font-semibold mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  4. Cookies
                </h2>
                <p>
                  Diese Website verwendet Cookies. Sie können Ihre Cookie-Einstellungen jederzeit über den
                  Link "Cookie-Einstellungen" im Footer dieser Seite anpassen.
                </p>
              </section>

              <div className={`mt-8 p-4 rounded-2xl ${
                isDark ? 'bg-yellow-500/20 border border-yellow-500/30' : 'bg-yellow-50 border border-yellow-200'
              }`}>
                <p className={`text-sm ${isDark ? 'text-yellow-200' : 'text-yellow-800'}`}>
                  Hinweis: Dies ist ein Platzhalter. Bitte ersetzen Sie diesen Text durch Ihre vollständige
                  Datenschutzerklärung gemäß DSGVO.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <Footer />
    </div>
  )
}