portfolio/app/components/About.tsx

"use client";

import { motion, Variants } from "framer-motion";
import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb } from "lucide-react";
import { useEffect, useState } from "react";
import { useLocale, useTranslations } from "next-intl";
import type { JSONContent } from "@tiptap/react";
import RichTextClient from "./RichTextClient";
import CurrentlyReading from "./CurrentlyReading";

const staggerContainer: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.15,
      delayChildren: 0.2,
    },
  },
};

const fadeInUp: Variants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.5,
      ease: [0.25, 0.1, 0.25, 1],
    },
  },
};

const About = () => {
  const locale = useLocale();
  const t = useTranslations("home.about");
  const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
  const [techStackFromCMS, setTechStackFromCMS] = useState<any[] | null>(null);
  const [hobbiesFromCMS, setHobbiesFromCMS] = useState<any[] | null>(null);

  useEffect(() => {
    (async () => {
      try {
        const res = await fetch(
          `/api/content/page?key=${encodeURIComponent("home-about")}&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);
        } else {
          setCmsDoc(null);
        }
      } catch {
        // ignore; fallback to static
        setCmsDoc(null);
      }
    })();
  }, [locale]);

  // Load Tech Stack from Directus
  useEffect(() => {
    (async () => {
      try {
        const res = await fetch(`/api/tech-stack?locale=${encodeURIComponent(locale)}`);
        if (res.ok) {
          const data = await res.json();
          if (data?.techStack && data.techStack.length > 0) {
            setTechStackFromCMS(data.techStack);
          }
        }
      } catch (error) {
        if (process.env.NODE_ENV === 'development') {
          console.log('Tech Stack from Directus not available, using fallback');
        }
      }
    })();
  }, [locale]);

  // Load Hobbies from Directus
  useEffect(() => {
    (async () => {
      try {
        const res = await fetch(`/api/hobbies?locale=${encodeURIComponent(locale)}`);
        if (res.ok) {
          const data = await res.json();
          if (data?.hobbies && data.hobbies.length > 0) {
            setHobbiesFromCMS(data.hobbies);
          }
        }
      } catch (error) {
        if (process.env.NODE_ENV === 'development') {
          console.log('Hobbies from Directus not available, using fallback');
        }
      }
    })();
  }, [locale]);

  // Fallback Tech Stack (from messages/en.json, messages/de.json)
  const techStackFallback = [
    {
      key: 'frontend',
      category: t("techStack.categories.frontendMobile"),
      icon: Globe,
      items: ["Next.js", "Tailwind CSS", "Flutter"],
    },
    {
      key: 'backend',
      category: t("techStack.categories.backendDevops"),
      icon: Server,
      items: ["Docker Swarm", "Traefik", "Nginx Proxy Manager", "Redis"],
    },
    {
      key: 'tools',
      category: t("techStack.categories.toolsAutomation"),
      icon: Wrench,
      items: ["Git", "CI/CD", "n8n", t("techStack.items.selfHostedServices")],
    },
    {
      key: 'security',
      category: t("techStack.categories.securityAdmin"),
      icon: Shield,
      items: ["CrowdSec", "Suricata", "Mailcow"],
    },
  ];

  // Map icon names from Directus to Lucide components
  const iconMap: Record<string, any> = {
    Globe,
    Server,
    Code,
    Wrench,
    Shield,
    Activity,
    Lightbulb,
    Gamepad2
  };

  // Fallback Hobbies
  const hobbiesFallback: Array<{ icon: typeof Code; text: string }> = [
    { icon: Code, text: t("hobbies.selfHosting") },
    { icon: Gamepad2, text: t("hobbies.gaming") },
    { icon: Server, text: t("hobbies.gameServers") },
    { icon: Activity, text: t("hobbies.jogging") },
  ];

  // Use CMS Hobbies if available, otherwise fallback
  const hobbies = hobbiesFromCMS 
    ? hobbiesFromCMS.map((hobby: any) => ({
        icon: iconMap[hobby.icon] || Code,
        text: hobby.title
      }))
    : hobbiesFallback;

  // Use CMS Tech Stack if available, otherwise fallback
  const techStack = techStackFromCMS 
    ? techStackFromCMS.map((cat: any) => ({
        key: cat.key,
        category: cat.name,
        icon: iconMap[cat.icon] || Code,
        items: cat.items.map((item: any) => item.name)
      }))
    : techStackFallback;

  return (
    <section
      id="about"
      className="py-24 px-4 bg-gradient-to-br from-liquid-sky/15 via-liquid-lavender/10 to-liquid-pink/15 relative overflow-hidden"
    >
      <div className="max-w-6xl mx-auto relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
          {/* Text Content */}
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, margin: "-100px" }}
            variants={staggerContainer}
            className="space-y-8"
          >
            <motion.h2
              variants={fadeInUp}
              className="text-4xl md:text-5xl font-bold text-stone-900"
            >
              {t("title")}
            </motion.h2>
            <motion.div
              variants={fadeInUp}
              className="prose prose-stone prose-lg text-stone-700 space-y-4"
            >
              {cmsDoc ? (
                <RichTextClient doc={cmsDoc} className="prose prose-stone max-w-none" />
              ) : (
                <>
                  <p>{t("p1")}</p>
                  <p>{t("p2")}</p>
                  <p>{t("p3")}</p>
                </>
              )}
              <motion.div
                variants={fadeInUp}
                className="relative overflow-hidden bg-gradient-to-br from-liquid-mint/15 via-liquid-sky/10 to-liquid-lavender/15 border-2 border-liquid-mint/30 rounded-xl p-5 backdrop-blur-sm"
              >
                <div className="flex items-start gap-3">
                  <Lightbulb size={20} className="text-stone-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <p className="text-sm font-semibold text-stone-800 mb-1">
                      {t("funFactTitle")}
                    </p>
                    <p className="text-sm text-stone-700 leading-relaxed">
                      {t("funFactBody")}
                    </p>
                  </div>
                </div>
              </motion.div>
            </motion.div>
          </motion.div>

          {/* Tech Stack & Hobbies */}
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, margin: "-100px" }}
            variants={staggerContainer}
            className="space-y-8"
          >
            <div>
              <motion.h3
                variants={fadeInUp}
                className="text-2xl font-bold text-stone-900 mb-6"
              >
                {t("techStackTitle")}
              </motion.h3>
              <div className="grid grid-cols-1 gap-4">
                {techStack.map((stack, idx) => (
                  <motion.div
                    key={`${stack.category}-${idx}`}
                    variants={fadeInUp}
                    whileHover={{
                      scale: 1.02,
                      transition: { duration: 0.4, ease: "easeOut" },
                    }}
                    className={`p-5 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out ${
                      idx === 0
                        ? "bg-gradient-to-br from-liquid-sky/10 to-liquid-mint/10 border-liquid-sky/30 hover:border-liquid-sky/50 hover:from-liquid-sky/15 hover:to-liquid-mint/15"
                        : idx === 1
                          ? "bg-gradient-to-br from-liquid-peach/10 to-liquid-coral/10 border-liquid-peach/30 hover:border-liquid-peach/50 hover:from-liquid-peach/15 hover:to-liquid-coral/15"
                          : idx === 2
                            ? "bg-gradient-to-br from-liquid-lavender/10 to-liquid-pink/10 border-liquid-lavender/30 hover:border-liquid-lavender/50 hover:from-liquid-lavender/15 hover:to-liquid-pink/15"
                            : "bg-gradient-to-br from-liquid-teal/10 to-liquid-lime/10 border-liquid-teal/30 hover:border-liquid-teal/50 hover:from-liquid-teal/15 hover:to-liquid-lime/15"
                    }`}
                  >
                    <div className="flex items-center gap-3 mb-3">
                      <div className="p-2 bg-white rounded-lg shadow-sm text-stone-700">
                        <stack.icon size={18} />
                      </div>
                      <h4 className="font-semibold text-stone-800">
                        {stack.category}
                      </h4>
                    </div>
                    <div className="flex flex-wrap gap-2">
                      {stack.items.map((item, itemIdx) => (
                        <span
                          key={`${stack.category}-${item}-${itemIdx}`}
                          className={`px-3 py-1.5 rounded-lg border-2 text-sm text-stone-700 font-medium transition-all duration-400 ease-out ${
                            itemIdx % 4 === 0
                              ? "bg-liquid-mint/10 border-liquid-mint/30 hover:bg-liquid-mint/20 hover:border-liquid-mint/50"
                              : itemIdx % 4 === 1
                                ? "bg-liquid-lavender/10 border-liquid-lavender/30 hover:bg-liquid-lavender/20 hover:border-liquid-lavender/50"
                                : itemIdx % 4 === 2
                                  ? "bg-liquid-rose/10 border-liquid-rose/30 hover:bg-liquid-rose/20 hover:border-liquid-rose/50"
                                  : "bg-liquid-sky/10 border-liquid-sky/30 hover:bg-liquid-sky/20 hover:border-liquid-sky/50"
                          }`}
                        >
                          {item}
                        </span>
                      ))}
                    </div>
                  </motion.div>
                ))}
              </div>
            </div>

            {/* Hobbies */}
            <div>
              <motion.h3
                variants={fadeInUp}
                className="text-xl font-bold text-stone-900 mb-4"
              >
                {t("hobbiesTitle")}
              </motion.h3>
              <div className="space-y-3">
                {hobbies.map((hobby, idx) => (
                  <motion.div
                    key={`hobby-${hobby.text}-${idx}`}
                    variants={fadeInUp}
                    whileHover={{
                      x: 8,
                      scale: 1.02,
                      transition: { duration: 0.4, ease: "easeOut" },
                    }}
                  className={`flex items-center gap-3 p-4 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out ${
                      idx === 0
                        ? "bg-gradient-to-r from-liquid-mint/10 to-liquid-sky/10 border-liquid-mint/30 hover:border-liquid-mint/50 hover:from-liquid-mint/15 hover:to-liquid-sky/15"
                        : idx === 1
                          ? "bg-gradient-to-r from-liquid-coral/10 to-liquid-peach/10 border-liquid-coral/30 hover:border-liquid-coral/50 hover:from-liquid-coral/15 hover:to-liquid-peach/15"
                          : idx === 2
                            ? "bg-gradient-to-r from-liquid-lavender/10 to-liquid-pink/10 border-liquid-lavender/30 hover:border-liquid-lavender/50 hover:from-liquid-lavender/15 hover:to-liquid-pink/15"
                            : "bg-gradient-to-r from-liquid-lime/10 to-liquid-teal/10 border-liquid-lime/30 hover:border-liquid-lime/50 hover:from-liquid-lime/15 hover:to-liquid-teal/15"
                    }`}
                  >
                    <hobby.icon size={20} className="text-stone-600" />
                    <span className="text-stone-700 font-medium">
                      {hobby.text}
                    </span>
                  </motion.div>
                ))}
              </div>
            </div>

            {/* Currently Reading */}
            <motion.div
              variants={fadeInUp}
              className="mt-8"
            >
              <CurrentlyReading />
            </motion.div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default About;