"use client";

import React from "react";
import { motion } from 'framer-motion';
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 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">
        
        {/* Editorial Header */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          className="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>
        </motion.div>

        {/* Bento Content Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
          
          {/* Main Privacy Text (Large) */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
            className="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"
          >
            {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-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} /> Allgemeiner Überblick
                  </h2>
                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
                    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>
                </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">
                    Wenn Sie per Formular auf der Website oder per E-Mail Kontakt mit mir aufnehmen, werden Ihre angegebenen Daten zwecks Bearbeitung der Anfrage bei mir gespeichert.
                  </p>
                </section>
              </div>
            )}
          </motion.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>
  );
}