portfolio/app/_ui/PrivacyPolicyClient.tsx

"use client";

import Link from "next/link";
import { useLocale, useTranslations } from "next-intl";
import RichTextClient from "../components/RichTextClient";
import { useConsent } from "../components/ConsentProvider";
import { BackArrow, SubpageIntro, card, frame, ghost, monoLabel } from "./subpage";
import { useCmsPage } from "./useCmsPage";

export default function PrivacyPolicyClient() {
  const locale = useLocale();
  const t = useTranslations("common");
  const tFooter = useTranslations("footer");
  const { resetConsent } = useConsent();
  const cmsHtml = useCmsPage("privacy-policy", locale);
  const de = locale === "de";

  const principles = de
    ? [
        { title: "Verschlüsselung", text: "Übertragung per SSL/TLS." },
        { title: "Transparenz", text: "Kein verstecktes Tracking." },
        { title: "DSGVO", text: "Ausgelegt auf die DSGVO." },
      ]
    : [
        { title: "Encryption", text: "SSL/TLS secured data transfer." },
        { title: "Transparency", text: "No hidden tracking algorithms." },
        { title: "Compliance", text: "GDPR / DSGVO optimized." },
      ];

  return (
    <>
      <SubpageIntro
        back={
          <Link href={`/${locale}`} className={ghost}>
            <BackArrow /> {t("backToHome")}
          </Link>
        }
        kicker="DSGVO · GDPR"
        title={tFooter("privacyPolicy")}
      />

      <div className="mt-10 grid gap-10 lg:grid-cols-12 lg:gap-12">
        <div className="min-w-0 lg:col-span-8">
          {cmsHtml ? (
            <RichTextClient html={cmsHtml} className="plakat-prose max-w-[68ch]" />
          ) : (
            <div className="plakat-prose max-w-[68ch]">
              <h2>Verantwortlicher</h2>
              <p>
                <strong>Dennis Konkol</strong>
                <br />
                Auf dem Ziegenbrink 2B
                <br />
                49082 Osnabrück, Deutschland
                <br />
                E-Mail: <a href="mailto:contact@dk0.dev">contact@dk0.dev</a>
              </p>
              <p>
                Diese Datenschutzerklärung gilt für die Verarbeitung personenbezogener Daten durch den oben genannten
                Verantwortlichen.
              </p>

              <h2>Datenerfassung</h2>
              <p>
                Beim Zugriff auf diese Website werden automatisch Informationen allgemeiner Natur erfasst. Diese beinhalten
                unter anderem:
              </p>
              <ul>
                <li>IP-Adresse (in anonymisierter Form)</li>
                <li>Uhrzeit und Datum des Zugriffs</li>
                <li>Browsertyp und Betriebssystem</li>
                <li>Referrer-URL (die zuvor besuchte Seite)</li>
              </ul>
              <p>
                Diese Informationen werden anonymisiert erfasst und dienen ausschließlich statistischen Auswertungen.
                Rückschlüsse auf Ihre Person sind nicht möglich.
              </p>

              <h2>Analyse- und Tracking-Tools</h2>
              <p>
                Zur Analyse der Nutzung dieser Website setze ich <strong>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>

              <h2>Kontaktformular</h2>
              <p>
                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>

              <h2>Social Media Links</h2>
              <p>
                Diese Website enthält Links zu GitHub und LinkedIn. Durch das Anklicken dieser Links gelten die
                Datenschutzbestimmungen der jeweiligen Anbieter.
              </p>

              <h2>Weitergabe von Daten</h2>
              <p>Eine Weitergabe Ihrer personenbezogenen Daten erfolgt nur, wenn:</p>
              <ul>
                <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 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>

              <h2>Ihre Rechte</h2>
              <p>Sie haben gemäß DSGVO folgende Rechte:</p>
              <ul>
                <li>Art. 15 DSGVO: Auskunftsrecht über Ihre gespeicherten Daten</li>
                <li>Art. 16 DSGVO: Recht auf Berichtigung unrichtiger Daten</li>
                <li>Art. 17 DSGVO: Recht auf Löschung (soweit keine Aufbewahrungspflichten entgegenstehen)</li>
                <li>Art. 18 DSGVO: Recht auf Einschränkung der Verarbeitung</li>
                <li>Art. 20 DSGVO: Recht auf Datenübertragbarkeit</li>
                <li>Art. 21 DSGVO: Widerspruchsrecht gegen die Verarbeitung</li>
              </ul>
              <p>
                Beschwerden können Sie an die zuständige Datenschutzaufsichtsbehörde richten:{" "}
                <a href="https://www.bfdi.bund.de/" target="_blank" rel="noopener noreferrer">
                  bfdi.bund.de
                </a>
              </p>

              <h2>Datensicherheit</h2>
              <p>
                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>

              <h2>Änderungen</h2>
              <p>
                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="font-mono text-[13px]">Letzte Aktualisierung: Mai 2025</p>
            </div>
          )}
        </div>

        <aside className="grid content-start gap-6 lg:col-span-4">
          <section className={`${frame} bg-ink p-5 text-paper md:p-6`} aria-labelledby="privacy-principles">
            <h2 id="privacy-principles" className={monoLabel}>
              {de ? "Grundsätze" : "Principles"}
            </h2>
            <dl className="mt-3">
              {principles.map((p) => (
                <div key={p.title} className="grid grid-cols-[10px_1fr] items-baseline gap-3 border-b border-paper/20 py-3 last:border-b-0">
                  <span className="h-2.5 w-2.5 rounded-full bg-signal" aria-hidden="true" />
                  <div>
                    <dt className="font-display text-xl font-extrabold tracking-[-0.02em]">{p.title}</dt>
                    <dd className="mt-0.5 text-[15px] opacity-80">{p.text}</dd>
                  </div>
                </div>
              ))}
            </dl>
          </section>

          <section className={`${card} p-5 md:p-6`} aria-labelledby="privacy-settings">
            <h2 id="privacy-settings" className={`${monoLabel} flex items-center gap-2`}>
              <span className="h-2.5 w-2.5 rounded-full bg-ok shadow-[0_0_0_3px_rgb(var(--plakat-ok)/0.2)]" aria-hidden="true" />
              {de ? "Verbindung" : "Connection"}
            </h2>
            <p className="mt-3 font-display text-2xl font-extrabold leading-tight tracking-[-0.03em]">
              {de ? "Deine Verbindung ist verschlüsselt." : "Your connection is private and secure."}
            </p>
            <button type="button" onClick={resetConsent} className={`${ghost} mt-4`} title={tFooter("privacySettingsTitle")}>
              {tFooter("privacySettings")}
            </button>
          </section>
        </aside>
      </div>
    </>
  );
}