portfolio/app/privacy-policy/page.tsx

"use client";

import React from "react";
import { motion } from 'framer-motion';
import { ArrowLeft } from 'lucide-react';
import Header from "../components/Header";
import Footer from "../components/Footer";
import Link from "next/link";
import { useLocale, useTranslations } from "next-intl";
import { useEffect, useState } from "react";
import type { JSONContent } from "@tiptap/react";
import RichTextClient from "../components/RichTextClient";

export default function PrivacyPolicy() {
  const locale = useLocale();
  const t = useTranslations("common");
  const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
  const [cmsTitle, setCmsTitle] = useState<string | null>(null);

  useEffect(() => {
    (async () => {
      try {
        const res = await fetch(
          `/api/content/page?key=${encodeURIComponent("privacy-policy")}&locale=${encodeURIComponent(locale)}`,
        );
        const data = await res.json();
        // Only use CMS content if it exists for the active locale.
        if (data?.content?.content && data?.content?.locale === locale) {
          setCmsDoc(data.content.content as JSONContent);
          setCmsTitle((data.content.title as string | null) ?? null);
        } else {
          setCmsDoc(null);
          setCmsTitle(null);
        }
      } catch {
        // ignore; fallback to static content
        setCmsDoc(null);
        setCmsTitle(null);
      }
    })();
  }, [locale]);

  return (
    <div className="min-h-screen animated-bg">
      <Header />
      <main className="max-w-4xl mx-auto px-4 pt-32 pb-20">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="mb-8"
        >
          <motion.a
            href={`/${locale}`}
            className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors mb-6"
          >
            <ArrowLeft size={20} />
            <span>{t("backToHome")}</span>
          </motion.a>
          
          <h1 className="text-4xl md:text-5xl font-bold mb-6 gradient-text">
            {cmsTitle || "Datenschutzerklärung"}
          </h1>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          className="glass-card p-8 rounded-2xl space-y-6 text-white"
        >
          {cmsDoc ? (
            <RichTextClient doc={cmsDoc} className="prose prose-invert max-w-none text-gray-300" />
          ) : (
            <>
              <div className="text-gray-300 leading-relaxed">
                <p>
                  Der Schutz Ihrer persönlichen Daten ist mir wichtig. In dieser Datenschutzerklärung informiere ich Sie
                  über die Verarbeitung personenbezogener Daten im Rahmen meines Internet-Angebots.
                </p>
              </div>

              <div className="text-gray-300 leading-relaxed">
                <h2 className="text-2xl font-semibold mb-4">Verantwortlicher für die Datenverarbeitung</h2>
                <div className="space-y-2 text-gray-300">
                  <p>
                    <strong>Name:</strong> Dennis Konkol
                  </p>
                  <p>
                    <strong>Adresse:</strong> Auf dem Ziegenbrink 2B, 49082 Osnabrück, Deutschland
                  </p>
                  <p>
                    <strong>E-Mail:</strong>{" "}
                    <Link className="text-blue-400 hover:text-blue-300 transition-colors" href="mailto:info@dk0.dev">
                      info@dk0.dev
                    </Link>
                  </p>
                  <p>
                    <strong>Website:</strong>{" "}
                    <Link className="text-blue-400 hover:text-blue-300 transition-colors" href="https://www.dk0.dev">
                      dk0.dev
                    </Link>
                  </p>
                </div>
                <p className="mt-4">
                  Diese Datenschutzerklärung gilt für die Verarbeitung personenbezogener Daten durch den oben genannten
                  Verantwortlichen.
                </p>
              </div>

              <h2 className="text-2xl font-semibold mt-6">
                Erfassung allgemeiner Informationen beim Besuch meiner Website
              </h2>
              <div className="mt-2">
                Beim Zugriff auf meiner Website werden automatisch Informationen allgemeiner Natur erfasst. Diese
                beinhalten unter anderem:
                <ul className="list-disc list-inside mt-2">
                  <li>IP-Adresse (in anonymisierter Form)</li>
                  <li>Uhrzeit</li>
                  <li>Browsertyp</li>
                  <li>Verwendetes Betriebssystem</li>
                  <li>Referrer-URL (die zuvor besuchte Seite)</li>
                </ul>
                <br />
                Diese Informationen werden anonymisiert erfasst und dienen ausschließlich statistischen Auswertungen.
                Rückschlüsse auf Ihre Person sind nicht möglich. Diese Daten werden verarbeitet, um:
                <ul className="list-disc list-inside mt-2">
                  <li>die Inhalte meiner Website korrekt auszuliefern,</li>
                  <li>die Inhalte meiner Website zu optimieren,</li>
                  <li>die Systemsicherheit und -stabilität zu analysiern.</li>
                </ul>
              </div>

              <h2 className="text-2xl font-semibold mt-6">Cookies</h2>
              <p className="mt-2">
                Diese Website verwendet ein technisch notwendiges Cookie, um deine Datenschutz-Einstellungen (z.B.
                Analytics/Chatbot) zu speichern. Ohne dieses Cookie wäre ein Consent-Banner bei jedem Besuch erneut
                nötig.
              </p>

              <h2 className="text-2xl font-semibold mt-6">Analyse- und Tracking-Tools</h2>
              <p className="mt-2">
          Die nachfolgend beschriebene Analyse- und Tracking-Methode (im
          Folgenden „Maßnahme“ genannt) basiert auf Art. 6 Abs. 1 S. 1 lit. f
          DSGVO. Durch diese Maßnahme möchten ich eine benutzerfreundliche
          Gestaltung sowie eine kontinuierliche Verbesserung meiner Website
          sicherstellen. Diese Interessen sind im Sinne der genannten Vorschrift
          als berechtigt anzusehen.
          <br />
          <br />
          Rechtsgrundlage: Art. 6 Abs. 1 S. 1 lit. f DSGVO (berechtigtes
          Interesse an der Analyse und Optimierung unserer Website).
          <br />
          <br />
          Detaillierte Informationen zu den erhobenen Daten und deren
          Verarbeitung finden Sie in den nachfolgenden Abschnitten.
          <br />
          <br />
          Zur Analyse der Nutzung meiner Website setze ich Umami ein. Umami
          speichert keine IP-Adressen oder Cookies. Alle erfassten Daten sind
          anonymisiert. Da ich Umami auf meinem eigenen Server betreibe, erfolgt
          keine Weitergabe an Dritte. Weitere Informationen finden Sie unter{" "}
          <Link
            className="text-blue-700 transition-underline"
            href={"https://umami.is"}
          >
            Umami
          </Link>
          .
        </p>
        <p className="mt-4">
          Zusätzlich kann diese Website optionale, selbst gehostete
          Nutzungsstatistiken erfassen (z.B. Seitenaufrufe, Performance-Metriken),
          die erst nach deiner Einwilligung im Consent-Banner aktiviert werden.
        </p>

        <h2 className="text-2xl font-semibold mt-6">Error Monitoring (Sentry)</h2>
        <p className="mt-2">
          Um Fehler und Probleme auf dieser Website schnell zu erkennen und zu beheben, 
          nutze ich Sentry.io, einen Dienst zur Fehlerüberwachung. Dabei werden technische 
          Informationen wie Browser-Typ, Betriebssystem, URL der aufgerufenen Seite und 
          Fehlermeldungen an Sentry übermittelt. Diese Daten dienen ausschließlich der 
          Verbesserung der Website-Stabilität und werden nicht für andere Zwecke verwendet.
          <br />
          <br />
          Anbieter: Functional Software, Inc. (Sentry), 45 Fremont Street, 8th Floor, 
          San Francisco, CA 94105, USA
          <br />
          <br />
          Rechtsgrundlage: Art. 6 Abs. 1 S. 1 lit. f DSGVO (berechtigtes Interesse an 
          der Fehleranalyse und Systemstabilität).
          <br />
          <br />
          Weitere Informationen: <Link
            className="text-blue-700 transition-underline"
            href={"https://sentry.io/privacy/"}
          >
            Sentry Datenschutzerklärung
          </Link>
        </p>

        <h2 className="text-2xl font-semibold mt-6">Kontaktformular</h2>
        <p className="mt-2">
          Wenn Sie das Kontaktformular nutzen, werden Ihre Angaben zur
          Bearbeitung Ihrer Anfrage gespeichert. Diese Daten werden nicht an
          Dritte weitergegeben und nach Erfüllung des Zwecks gelöscht. <br />
          <br />
          Rechtsgrundlage: Art. 6 Abs. 1 S. 1 lit. a DSGVO (Einwilligung).
        </p>
        <h2 className="text-2xl font-semibold mt-6">Chatbot</h2>
        <p className="mt-2">
          Wenn du den optionalen Chatbot nutzt, werden die von dir eingegebenen
          Nachrichten verarbeitet, um eine Antwort zu generieren. Die Verarbeitung
          kann dabei über eine selbst gehostete Automations-/Chat-Infrastruktur
          (z.B. n8n) erfolgen. Bitte gib im Chat keine sensiblen Daten ein.
          <br />
          <br />
          Rechtsgrundlage: Art. 6 Abs. 1 S. 1 lit. a DSGVO (Einwilligung) – der
          Chatbot wird erst nach Aktivierung im Consent-Banner geladen.
        </p>
        <h2 className="text-2xl font-semibold mt-6">Social Media Links</h2>
        <p className="mt-2">
          Unsere Website enthält Links zu GitHub und LinkedIn. Durch das
          Anklicken dieser Links gelten die Datenschutzbestimmungen der
          jeweiligen Anbieter.
        </p>
        <h2 className="text-2xl font-semibold mt-6">Weitergabe von Daten</h2>
        <div className="mt-2">
          Eine Weitergabe Ihrer personenbezogenen Daten erfolgt nur, wenn:
          <ul className="list-disc list-inside mt-2">
            <li>
              Sie nach Art. 6 Abs. 1 S. 1 lit. a DSGVO ausdrücklich eingewilligt
              haben,
            </li>
            <li>
              dies zur Vertragserfüllung gemäß Art. 6 Abs. 1 S. 1 lit. b DSGVO
              erforderlich ist,
            </li>
            <li>
              eine gesetzliche Verpflichtung zur Weitergabe nach Art. 6 Abs. 1
              S. 1 lit. c DSGVO besteht oder
            </li>
            <li>
              die Verarbeitung nach Art. 6 Abs. 1 S. 1 lit. f DSGVO zur Wahrung
              berechtigter Interessen erforderlich ist.
            </li>
          </ul>
        </div>
        <h2 className="text-2xl font-semibold mt-6">
          Speicherdauer und Löschung
        </h2>
        <p className="mt-2">
          Ihre Daten werden nur solange gespeichert, wie dies für die Erfüllung
          des Verarbeitungszwecks erforderlich ist. Nach Erfüllung des Zwecks
          werden Ihre Daten gelöscht.
        </p>
        <h2 className="text-2xl font-semibold mt-6">Ihre Rechte</h2>
        <div className="mt-2">
          Sie haben gemäß DSGVO folgende Rechte:
          <ul className="list-disc list-inside mt-2">
            <li>
              Art. 15 DSGVO: Auskunftsrecht über Ihre von mir gespeicherten
              Daten
            </li>
            <li>
              Art. 16 DSGVO: Recht auf Berichtigung unrichtiger oder
              unvollständiger Daten
            </li>
            <li>
              Art. 17 DSGVO: Recht auf Löschung Ihrer bei mir gespeicherten
              Daten (soweit keine gesetzlichen Aufbewahrungspflichten
              entgegenstehen)
            </li>
            <li>
              Art. 18 DSGVO: Recht auf Einschränkung der Verarbeitung Ihrer
              Daten
            </li>
            <li>Art. 20 DSGVO: Recht auf Datenübertragbarkeit</li>
            <li>
              Art. 21 DSGVO: Widerspruchsrecht gegen die Verarbeitung Ihrer
              Daten
            </li>
          </ul>
          <br />
          Falls Sie eine Einwilligung erklärt haben, können Sie diese jederzeit
          widerrufen.
          <br />
          Beschwerden können Sie an die zuständige Datenschutzaufsichtsbehörde
          richten. Eine Liste der Datenschutzbeauftragten sowie deren
          Kontaktdaten finden Sie unter:{" "}
          <Link
            className="text-blue-700 transition-underline"
            href={"https://www.bfdi.bund.de/"}
          >
            https://www.bfdi.bund.de/
          </Link>
        </div>
        <h2 className="text-2xl font-semibold mt-6">Datensicherheit</h2>
        <p className="mt-2">
          Ich setze technische und organisatorische Maßnahmen ein, um Ihre Daten
          zu schützen. Dazu gehören unter anderem die SSL-Verschlüsselung. Diese
          Verschlüsselung erkennen Sie an dem Schloss-Symbol in der Adresszeile
          Ihres Browsers und an der URL, die mit &#34;https://&#34; beginnt.
        </p>
        <h2 className="text-2xl font-semibold mt-6">Kontakt</h2>
        <p className="mt-2">
          Bei Fragen zur Datenschutzerklärung kontaktieren Sie mich unter{" "}
          <Link
            href="mailto:info@dk0.dev"
            className="text-blue-700 transition-underline"
          >
            info@dk0.dev
          </Link>{" "}
          oder nutzen Sie das Kontaktformular auf meiner Website.
        </p>
        <h2 className="text-2xl font-semibold mt-6">
          Änderungen der Datenschutzerklärung
        </h2>
        <p className="mt-2">
          Diese Datenschutzerklärung wird regelmäßig aktualisiert, um den
          gesetzlichen Anforderungen zu entsprechen und neue Entwicklungen zu
          berücksichtigen. Die jeweils aktuelle Datenschutzerklärung finden Sie
          auf meiner Website.
        </p>
          <div className="pt-4 border-t border-gray-700">
            <p className="text-gray-400 text-sm">Letzte Aktualisierung: 12.02.2025</p>
          </div>
            </>
          )}
        </motion.div>
      </main>
      <Footer />
    </div>
  );
}