portfolio/app/legal-notice/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 LegalNotice() {
  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("legal-notice")}&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"
        >
          <Link
            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>
          </Link>
          
          <h1 className="text-4xl md:text-5xl font-bold mb-6 gradient-text">
            {cmsTitle || "Impressum"}
          </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"
        >
          {cmsDoc ? (
            <RichTextClient doc={cmsDoc} className="prose prose-invert max-w-none text-gray-300" />
          ) : (
            <>
              <div className="text-gray-300 leading-relaxed">
                <h2 className="text-2xl font-semibold mb-4">Verantwortlicher für die Inhalte dieser Website</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 href="mailto:info@dki.one" className="text-blue-400 hover:text-blue-300 transition-colors">
                      info@dk0.dev
                    </Link>
                  </p>
                  <p>
                    <strong>Website:</strong>{" "}
                    <Link href="https://www.dk0.dev" className="text-blue-400 hover:text-blue-300 transition-colors">
                      dk0.dev
                    </Link>
                  </p>
                </div>
              </div>

              <div className="text-gray-300">
                <h2 className="text-2xl font-semibold mb-4">Haftung für Links</h2>
                <p className="leading-relaxed">
                  Meine Website enthält Links auf externe Websites. Ich habe keinen Einfluss auf die Inhalte dieser
                  Websites und kann daher keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der
                  Betreiber oder Anbieter der Seiten verantwortlich. Jedoch überprüfe ich die verlinkten Seiten zum
                  Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße. Bei Bekanntwerden von Rechtsverletzungen werde
                  ich derartige Links umgehend entfernen.
                </p>
              </div>

              <div className="text-gray-300">
                <h2 className="text-2xl font-semibold mb-4">Urheberrecht</h2>
                <p className="leading-relaxed">
                  Alle Inhalte dieser Website, einschließlich Texte, Fotos und Designs, stehen unter
                  Urheberrechtsschutz. Jegliche Nutzung ohne vorherige schriftliche Zustimmung des Urhebers ist
                  verboten.
                </p>
              </div>

              <div className="text-gray-300">
                <h2 className="text-2xl font-semibold mb-4">Gewährleistung</h2>
                <p className="leading-relaxed">
                  Die Nutzung der Inhalte dieser Website erfolgt auf eigene Gefahr. Als Diensteanbieter kann ich keine
                  Gewähr übernehmen für Schäden, die entstehen können, durch den Zugriff oder die Nutzung dieser
                  Website.
                </p>
              </div>

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