"use client";

import { useState, useEffect } from "react";
import { motion, Variants } from "framer-motion";
import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb } from "lucide-react";

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

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

const About = () => {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  const techStack = [
    {
      category: "Frontend & Mobile",
      icon: Globe,
      items: ["Next.js", "Tailwind CSS", "Flutter"],
    },
    {
      category: "Backend & DevOps",
      icon: Server,
      items: ["Docker Swarm", "Traefik", "Nginx Proxy Manager", "Redis"],
    },
    {
      category: "Tools & Automation",
      icon: Wrench,
      items: ["Git", "CI/CD", "n8n", "Self-hosted Services"],
    },
    {
      category: "Security & Admin",
      icon: Shield,
      items: ["CrowdSec", "Suricata", "Mailcow"],
    },
  ];

  const hobbies: Array<{ icon: typeof Code; text: string }> = [
    { icon: Code, text: "Self-Hosting & DevOps" },
    { icon: Gamepad2, text: "Gaming" },
    { icon: Server, text: "Setting up Game Servers" },
    { icon: Activity, text: "Jogging to clear my mind and stay active" },
  ];

  if (!mounted) return null;

  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"
            >
              About Me
            </motion.h2>
            <motion.div
              variants={fadeInUp}
              className="prose prose-stone prose-lg text-stone-700 space-y-4"
            >
              <p>
                Hi, I&apos;m Dennis – a student and passionate self-hoster based
                in Osnabrück, Germany.
              </p>
              <p>
                I love building full-stack web applications with{" "}
                <strong>Next.js</strong> and mobile apps with{" "}
                <strong>Flutter</strong>. But what really excites me is{" "}
                <strong>DevOps</strong>: I run my own infrastructure on{" "}
                <strong>IONOS</strong> and <strong>OVHcloud</strong>, managing
                everything with <strong>Docker Swarm</strong>,{" "}
                <strong>Traefik</strong>, and automated CI/CD pipelines with my
                own runners.
              </p>
              <p>
                When I&apos;m not coding or tinkering with servers, you&apos;ll
                find me <strong>gaming</strong>, <strong>jogging</strong>, or
                experimenting with new tech like game servers or automation
                workflows with <strong>n8n</strong>.
              </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">
                      Fun Fact
                    </p>
                    <p className="text-sm text-stone-700 leading-relaxed">
                      Even though I automate a lot, I still use pen and paper
                      for my calendar and notes – it helps me clear my head and
                      stay focused.
                    </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"
              >
                My Tech Stack
              </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-all 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"
              >
                When I&apos;m Not Coding
              </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-all 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>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default About;