portfolio/app/privacy-policy/page.tsx

"use client";

import React from "react";
import { ArrowLeft, Shield, Lock, Eye, Database, Globe } 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 RichTextClient from "../components/RichTextClient";

export default function PrivacyPolicy() {
  const locale = useLocale();
  const t = useTranslations("common");
  const [cmsHtml, setCmsHtml] = 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();
        if (data?.content?.html && data?.content?.locale === locale) {
          setCmsHtml(data.content.html as string);
        }
      } catch {}
    })();
  }, [locale]);

  return (
    <div className="min-h-screen bg-[#fdfcf8] dark:bg-stone-950 transition-colors duration-500">
      <Header />
      <main className="max-w-7xl mx-auto px-6 pt-40 pb-20">

        {/* Editorial Header */}
        <div className="animate-fade-in mb-20">
          <Link
            href={`/${locale}`}
            className="inline-flex items-center gap-2 text-stone-500 hover:text-stone-900 dark:hover:text-white transition-colors mb-10 group"
          >
            <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
            <span className="font-bold uppercase tracking-widest text-xs">{t("backToHome")}</span>
          </Link>

          <h1 className="text-6xl md:text-[10rem] font-black tracking-tighter text-stone-900 dark:text-stone-50 leading-[0.85] uppercase">
            Privacy<span className="text-liquid-purple">.</span>
          </h1>
        </div>

        {/* Bento Content Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">

          {/* Main Privacy Text (Large) */}
          <div className="animate-[fadeIn_0.5s_ease-out_0.1s_both] lg:col-span-8 bg-white dark:bg-stone-900 rounded-[3rem] p-10 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm">
            {cmsHtml ? (
              <div className="prose prose-stone dark:prose-invert max-w-none text-lg md:text-xl font-light leading-relaxed">
                <RichTextClient html={cmsHtml} />
              </div>
            ) : (
              <div className="space-y-16">
                <section>
                  <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight flex items-center gap-3">
                    <Shield className="text-liquid-mint" size={28} /> Verantwortlicher
                  </h2>
                  <div className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400 space-y-2">
                    <p className="font-bold text-stone-900 dark:text-stone-100">Dennis Konkol</p>
                    <p>Auf dem Ziegenbrink 2B</p>
                    <p>49082 Osnabrück, Deutschland</p>
                    <p>E-Mail: <a href="mailto:contact@dk0.dev" className="text-liquid-mint hover:underline">contact@dk0.dev</a></p>
                    <p className="text-sm text-stone-500 dark:text-stone-400 mt-4">Diese Datenschutzerklärung gilt für die Verarbeitung personenbezogener Daten durch den oben genannten Verantwortlichen.</p>
                  </div>
                </section>

                <section>
                  <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight flex items-center gap-3">
                    <Database className="text-liquid-sky" size={28} /> Datenerfassung
                  </h2>
                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
                    Beim Zugriff auf diese Website werden automatisch Informationen allgemeiner Natur erfasst. Diese beinhalten unter anderem:
                  </p>
                  <ul className="mt-4 space-y-2 text-xl font-light text-stone-600 dark:text-stone-400">
                    <li className="flex items-start gap-3"><span className="text-liquid-sky mt-2">•</span> IP-Adresse (in anonymisierter Form)</li>
                    <li className="flex items-start gap-3"><span className="text-liquid-sky mt-2">•</span> Uhrzeit und Datum des Zugriffs</li>
                    <li className="flex items-start gap-3"><span className="text-liquid-sky mt-2">•</span> Browsertyp und Betriebssystem</li>
                    <li className="flex items-start gap-3"><span className="text-liquid-sky mt-2">•</span> Referrer-URL (die zuvor besuchte Seite)</li>
                  </ul>
                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400 mt-4">
                    Diese Informationen werden anonymisiert erfasst und dienen ausschließlich statistischen Auswertungen. Rückschlüsse auf Ihre Person sind nicht möglich.
                  </p>
                </section>

                <section>
                  <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight">Analyse- und Tracking-Tools</h2>
                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
                    Zur Analyse der Nutzung dieser Website setze ich <strong className="text-stone-900 dark:text-stone-100">Umami</strong> 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. Rechtsgrundlage: Art. 6 Abs. 1 S. 1 lit. f DSGVO (berechtigtes Interesse an der Analyse und Optimierung der Website).
                  </p>
                </section>

                <section>
                  <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight">Kontaktformular</h2>
                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
                    Wenn Sie das Kontaktformular nutzen oder per E-Mail Kontakt aufnehmen, werden Ihre Angaben zur Bearbeitung Ihrer Anfrage gespeichert. Diese Daten werden nicht an Dritte weitergegeben und nach Erfüllung des Zwecks gelöscht. Rechtsgrundlage: Art. 6 Abs. 1 S. 1 lit. a DSGVO (Einwilligung).
                  </p>
                </section>

                <section>
                  <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight">Social Media Links</h2>
                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
                    Diese Website enthält Links zu GitHub und LinkedIn. Durch das Anklicken dieser Links gelten die Datenschutzbestimmungen der jeweiligen Anbieter.
                  </p>
                </section>

                <section>
                  <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight">Weitergabe von Daten</h2>
                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400 mb-4">Eine Weitergabe Ihrer personenbezogenen Daten erfolgt nur, wenn:</p>
                  <ul className="space-y-2 text-xl font-light text-stone-600 dark:text-stone-400">
                    <li className="flex items-start gap-3"><span className="text-liquid-mint mt-2">•</span> Sie nach Art. 6 Abs. 1 S. 1 lit. a DSGVO ausdrücklich eingewilligt haben,</li>
                    <li className="flex items-start gap-3"><span className="text-liquid-mint mt-2">•</span> dies zur Vertragserfüllung gemäß Art. 6 Abs. 1 S. 1 lit. b DSGVO erforderlich ist,</li>
                    <li className="flex items-start gap-3"><span className="text-liquid-mint mt-2">•</span> eine gesetzliche Verpflichtung nach Art. 6 Abs. 1 S. 1 lit. c DSGVO besteht, oder</li>
                    <li className="flex items-start gap-3"><span className="text-liquid-mint mt-2">•</span> die Verarbeitung nach Art. 6 Abs. 1 S. 1 lit. f DSGVO zur Wahrung berechtigter Interessen erforderlich ist.</li>
                  </ul>
                </section>

                <section>
                  <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight">Ihre Rechte</h2>
                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400 mb-4">Sie haben gemäß DSGVO folgende Rechte:</p>
                  <ul className="space-y-2 text-xl font-light text-stone-600 dark:text-stone-400">
                    <li className="flex items-start gap-3"><span className="text-liquid-purple mt-2">•</span> Art. 15 DSGVO: Auskunftsrecht über Ihre gespeicherten Daten</li>
                    <li className="flex items-start gap-3"><span className="text-liquid-purple mt-2">•</span> Art. 16 DSGVO: Recht auf Berichtigung unrichtiger Daten</li>
                    <li className="flex items-start gap-3"><span className="text-liquid-purple mt-2">•</span> Art. 17 DSGVO: Recht auf Löschung (soweit keine Aufbewahrungspflichten entgegenstehen)</li>
                    <li className="flex items-start gap-3"><span className="text-liquid-purple mt-2">•</span> Art. 18 DSGVO: Recht auf Einschränkung der Verarbeitung</li>
                    <li className="flex items-start gap-3"><span className="text-liquid-purple mt-2">•</span> Art. 20 DSGVO: Recht auf Datenübertragbarkeit</li>
                    <li className="flex items-start gap-3"><span className="text-liquid-purple mt-2">•</span> Art. 21 DSGVO: Widerspruchsrecht gegen die Verarbeitung</li>
                  </ul>
                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400 mt-4">
                    Beschwerden können Sie an die zuständige Datenschutzaufsichtsbehörde richten: <a href="https://www.bfdi.bund.de/" className="text-liquid-mint hover:underline" target="_blank" rel="noopener noreferrer">bfdi.bund.de</a>
                  </p>
                </section>

                <section>
                  <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight">Datensicherheit</h2>
                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
                    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 &ldquo;https://&rdquo; beginnt.
                  </p>
                </section>

                <section>
                  <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight">Änderungen</h2>
                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
                    Diese Datenschutzerklärung wird regelmäßig aktualisiert, um den gesetzlichen Anforderungen zu entsprechen. Die jeweils aktuelle Version finden Sie auf dieser Seite.
                  </p>
                  <p className="text-sm text-stone-400 dark:text-stone-500 mt-6">Letzte Aktualisierung: April 2025</p>
                </section>
              </div>
            )}
          </div>

          {/* Quick Info Cards */}
          <div className="lg:col-span-4 space-y-8">

            {/* Core Values Box */}
            <div className="bg-stone-900 rounded-[3rem] p-10 border border-stone-800 shadow-2xl text-white">
              <h3 className="text-xl font-black mb-8 uppercase tracking-widest text-liquid-purple">Principles</h3>
              <div className="space-y-6">
                <div className="flex items-start gap-4">
                  <Lock className="text-liquid-mint mt-1" size={18} />
                  <div>
                    <p className="font-bold">Encryption</p>
                    <p className="text-xs text-stone-500">SSL/TLS secured data transfer.</p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <Eye className="text-liquid-sky mt-1" size={18} />
                  <div>
                    <p className="font-bold">Transparency</p>
                    <p className="text-xs text-stone-500">No hidden tracking algorithms.</p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <Globe className="text-liquid-purple mt-1" size={18} />
                  <div>
                    <p className="font-bold">Compliance</p>
                    <p className="text-xs text-stone-500">GDPR / DSGVO optimized.</p>
                  </div>
                </div>
              </div>
            </div>

            {/* Cookie Status Indicator */}
            <div className="bg-liquid-mint/5 dark:bg-stone-900 rounded-[3rem] p-10 border border-liquid-mint/20 dark:border-stone-800/60">
              <div className="flex items-center gap-3 mb-4">
                <div className="w-2 h-2 bg-green-500 rounded-full" />
                <p className="text-xs font-black uppercase tracking-widest text-stone-400">Security Check</p>
              </div>
              <p className="text-stone-900 dark:text-stone-50 font-bold mb-4">Your connection is private and secure.</p>
              <button
                onClick={() => {
                  localStorage.removeItem('cookie-consent');
                  window.location.reload();
                }}
                className="text-[10px] font-black uppercase tracking-widest border-b border-stone-300 dark:border-stone-700 pb-1 hover:text-liquid-mint transition-colors"
              >
                Reset Privacy Settings
              </button>
            </div>

          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}