"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);

  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?.content && data?.content?.locale === locale) {
          setCmsDoc(data.content.content as JSONContent);
        }
      } 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">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="mb-12"
        >
          <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-[8rem] font-black tracking-tighter text-stone-900 dark:text-stone-50 leading-[0.85] uppercase">
            Privacy<span className="text-liquid-purple">.</span>
          </h1>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          className="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"
        >
          {cmsDoc ? (
            <div className="prose prose-stone dark:prose-invert max-w-none text-lg md:text-xl font-light leading-relaxed">
              <RichTextClient doc={cmsDoc} />
            </div>
          ) : (
            <div className="space-y-12">
              <div className="text-stone-600 dark:text-stone-400 leading-relaxed">
                <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-6 uppercase tracking-tight">Datenschutz</h2>
                <p className="text-xl font-light leading-relaxed mb-6">
                  Der Schutz Ihrer persönlichen Daten ist mir ein besonderes Anliegen. Ich verarbeite Ihre Daten daher ausschließlich auf Grundlage der gesetzlichen Bestimmungen (DSGVO, TMG).
                </p>
                <h3 className="text-2xl font-bold text-stone-800 dark:text-stone-200 mb-4">Kontakt mit mir</h3>
                <p className="text-xl font-light">
                  Wenn Sie per Formular auf der Website oder per E-Mail Kontakt mit mir aufnehmen, werden Ihre angegebenen Daten zwecks Bearbeitung der Anfrage und für den Fall von Anschlussfragen bei mir gespeichert. Diese Daten gebe ich nicht ohne Ihre Einwilligung weiter.
                </p>
              </div>

              <div className="pt-8 border-t border-stone-100 dark:border-stone-800">
                <p className="text-stone-400 text-sm font-mono uppercase tracking-widest">Last updated: 12.02.2025</p>
              </div>
            </div>
          )}
        </motion.div>
      </main>
      <Footer />
    </div>
  );
}