'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 AGBPage() {
  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('legal')}
            </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 Geltungsbereich
                </h2>
                <p>
                  Diese Allgemeinen Geschäftsbedingungen gelten für alle Verträge zwischen BreakPilot GmbH
                  und dem Kunden über die Nutzung der BreakPilot Studio Plattform.
                </p>
              </section>

              <section>
                <h2 className={`text-xl font-semibold mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  § 2 Vertragsgegenstand
                </h2>
                <p>
                  Gegenstand des Vertrages ist die Bereitstellung der BreakPilot Studio Software als
                  webbasierte Anwendung (Software as a Service) zur Unterstützung von Lehrkräften
                  bei der Korrektur von Klausuren und Prüfungsarbeiten.
                </p>
              </section>

              <section>
                <h2 className={`text-xl font-semibold mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  § 3 Nutzungsrechte
                </h2>
                <p>
                  Der Kunde erhält das nicht-exklusive, nicht übertragbare Recht, die Software
                  während der Vertragslaufzeit bestimmungsgemäß zu nutzen.
                </p>
              </section>

              <section>
                <h2 className={`text-xl font-semibold mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  § 4 Datenschutz
                </h2>
                <p>
                  Die Verarbeitung personenbezogener Daten erfolgt gemäß unserer Datenschutzerklärung
                  und den Vorgaben der DSGVO. Für die Verarbeitung von Schülerdaten wird ein
                  Auftragsverarbeitungsvertrag (AVV) geschlossen.
                </p>
              </section>

              <section>
                <h2 className={`text-xl font-semibold mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  § 5 Haftung
                </h2>
                <p>
                  Die Haftung richtet sich nach den gesetzlichen Bestimmungen mit den in diesen AGB
                  enthaltenen Einschränkungen und Ergänzungen.
                </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ändigen
                  Allgemeinen Geschäftsbedingungen.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <Footer />
    </div>
  )
}