'use client'

import React from 'react'
import { useTheme } from '@/lib/ThemeContext'
import { Sidebar } from '@/components/Sidebar'

export default function ImpressumPage() {
  const { isDark } = useTheme()

  const gc = isDark
    ? 'bg-white/10 backdrop-blur-xl border border-white/10'
    : 'bg-white/80 backdrop-blur-xl border border-black/5'
  const h2c = isDark ? 'text-white' : 'text-slate-900'
  const tc = isDark ? 'text-white/70' : 'text-slate-600'
  const sc = isDark ? 'text-white/90' : 'text-slate-800'

  return (
    <div className={`min-h-screen flex ${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-cyan-100'}`}>
      <div className="relative z-10 p-4 flex-shrink-0"><Sidebar /></div>
      <div className="flex-1 overflow-y-auto scrollbar-hide" style={{ scrollbarWidth: 'none' }}>
        <div className="max-w-3xl mx-auto px-6 py-8 space-y-6">

          <h1 className={`text-2xl font-bold ${h2c}`}>Impressum</h1>

          <section className={`${gc} rounded-2xl p-6`}>
            <h2 className={`text-lg font-semibold mb-3 ${h2c}`}>Angaben gemaess § 5 TMG</h2>
            <div className={`space-y-1 ${tc}`}>
              <p>[Firmenname GmbH]</p>
              <p>[Strasse und Hausnummer]</p>
              <p>[PLZ Ort]</p>
              <p className="mt-3"><strong>Vertreten durch:</strong> [Geschaeftsfuehrer]</p>
              <p><strong>Registergericht:</strong> [Amtsgericht], HRB [Nummer]</p>
              <p><strong>USt-IdNr.:</strong> DE [Nummer]</p>
            </div>
          </section>

          <section className={`${gc} rounded-2xl p-6`}>
            <h2 className={`text-lg font-semibold mb-3 ${h2c}`}>Kontakt</h2>
            <div className={`space-y-1 ${tc}`}>
              <p>E-Mail: [E-Mail-Adresse]</p>
              <p>Telefon: [Telefonnummer]</p>
            </div>
          </section>

          <section className={`${gc} rounded-2xl p-6`}>
            <h2 className={`text-lg font-semibold mb-3 ${h2c}`}>Quellen, Lizenzen und Namensnennung</h2>
            <div className={`space-y-4 ${tc}`}>

              <div>
                <h3 className={`font-medium mb-1 ${sc}`}>Woerterbuch- und Uebersetzungsdaten</h3>
                <p className="text-sm">
                  Basierend auf Daten aus{' '}
                  <a href="https://en.wiktionary.org" className="text-blue-400 hover:underline" target="_blank" rel="noopener noreferrer">Wiktionary</a>,
                  extrahiert ueber{' '}
                  <a href="https://kaikki.org" className="text-blue-400 hover:underline" target="_blank" rel="noopener noreferrer">Kaikki.org</a>.
                </p>
                <p className="text-xs mt-1 opacity-70">
                  Referenz: Tatu Ylonen: &quot;Wiktextract: Wiktionary as Machine-Readable Structured Data&quot;, LREC 2022, pp. 1317-1325.
                </p>
                <p className="text-xs mt-1 opacity-70">
                  Lizenz: CC BY-SA 3.0 und GFDL. Aenderungen: Strukturierte Extraktion, Filterung und Aufbereitung fuer Lernzwecke.
                </p>
              </div>

              <div>
                <h3 className={`font-medium mb-1 ${sc}`}>IPA-Lautschrift</h3>
                <p className="text-sm">
                  <a href="https://github.com/open-dict-data/ipa-dict" className="text-blue-400 hover:underline" target="_blank" rel="noopener noreferrer">ipa-dict</a> — Phonemische Transkriptionen fuer 31 Sprachen.
                </p>
                <p className="text-xs mt-1 opacity-70">Lizenz: MIT License.</p>
              </div>

              <div>
                <h3 className={`font-medium mb-1 ${sc}`}>Vokabel-Bilder</h3>
                <p className="text-sm">
                  <a href="https://commons.wikimedia.org" className="text-blue-400 hover:underline" target="_blank" rel="noopener noreferrer">Wikimedia Commons</a> — Freie Medien.
                </p>
                <p className="text-xs mt-1 opacity-70">Lizenz: CC BY-SA. Einzelbildnachweise auf Anfrage.</p>
              </div>

              <div>
                <h3 className={`font-medium mb-1 ${sc}`}>Sprachsynthese (Text-to-Speech)</h3>
                <p className="text-sm">
                  <a href="https://github.com/rhasspy/piper" className="text-blue-400 hover:underline" target="_blank" rel="noopener noreferrer">Piper TTS</a> (Rhasspy Project) — Deutsch: Thorsten, Englisch: Lessac.
                </p>
                <p className="text-xs mt-1 opacity-70">Lizenz: MIT License.</p>
                <p className="text-sm mt-1">Weitere Sprachen (TR, AR, UK, RU, PL, FR, ES): Microsoft Edge TTS.</p>
              </div>

              <div>
                <h3 className={`font-medium mb-1 ${sc}`}>Rechtschreibpruefung</h3>
                <p className="text-sm">
                  <a href="https://github.com/barrust/pyspellchecker" className="text-blue-400 hover:underline" target="_blank" rel="noopener noreferrer">pyspellchecker</a> — Verfuegbar fuer: EN, DE, FR, ES, PT, IT, NL, RU, AR.
                </p>
                <p className="text-xs mt-1 opacity-70">Lizenz: MIT License.</p>
              </div>

            </div>
          </section>

          <section className={`${gc} rounded-2xl p-6`}>
            <h2 className={`text-lg font-semibold mb-3 ${h2c}`}>Haftungsausschluss</h2>
            <div className={`space-y-2 text-sm ${tc}`}>
              <p><strong>Haftung fuer Inhalte:</strong> [Standardtext einfuegen]</p>
              <p><strong>Haftung fuer Links:</strong> [Standardtext einfuegen]</p>
              <p><strong>Urheberrecht:</strong> [Standardtext einfuegen]</p>
            </div>
          </section>

          <section className={`${gc} rounded-2xl p-6`}>
            <h2 className={`text-lg font-semibold mb-3 ${h2c}`}>Streitschlichtung</h2>
            <p className={`text-sm ${tc}`}>[Hinweis zur OS-Plattform und Verbraucherstreitbeilegung]</p>
          </section>

          <section className={`${gc} rounded-2xl p-6`}>
            <h2 className={`text-lg font-semibold mb-3 ${h2c}`}>Datenschutzbeauftragter</h2>
            <div className={`space-y-1 ${tc}`}>
              <p>[Name, Adresse, E-Mail]</p>
            </div>
          </section>

        </div>
      </div>
    </div>
  )
}