"use client";

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Code, Terminal, Cpu, Globe } from 'lucide-react';
import { LiquidHeading } from '@/components/LiquidHeading';

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

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

  const techStack = [
    {
      category: 'Frontend',
      icon: Globe,
      items: ['React', 'TypeScript', 'Tailwind', 'Next.js']
    },
    {
      category: 'Backend',
      icon: Terminal,
      items: ['Node.js', 'PostgreSQL', 'Prisma', 'API Design']
    },
    {
      category: 'Tools',
      icon: Cpu,
      items: ['Git', 'Docker', 'VS Code', 'Figma']
    }
  ];

  if (!mounted) return null;

  return (
    <section id="about" className="py-24 px-4 bg-white 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-center">
          {/* Text Content */}
          <div className="space-y-8">
             <LiquidHeading 
                text="About Me" 
                level={2} 
                className="text-4xl md:text-5xl font-bold text-stone-900"
              />
            <div className="prose prose-stone prose-lg text-stone-600">
              <p>
                Hi, I&apos;m Dennis. I&apos;m a software engineer who likes building things that work well and look good.
              </p>
              <p>
                I&apos;m currently based in Osnabrück, Germany. My journey in tech is driven by curiosity—I love figuring out how things work and how to make them better.
              </p>
              <p>
                When I&apos;m not in front of a screen, you can find me listening to music, exploring new ideas, or just relaxing.
              </p>
            </div>
          </div>

          {/* Simplified Skills / Tech Stack */}
          <div className="grid grid-cols-1 gap-6">
            <h3 className="text-xl font-bold text-stone-900 mb-2">My Toolbox</h3>
            {techStack.map((stack, idx) => (
              <motion.div
                key={stack.category}
                initial={{ opacity: 0, x: 20 }}
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ delay: idx * 0.1 }}
                viewport={{ once: true }}
                className="p-6 rounded-xl bg-stone-50 border border-stone-100 hover:border-stone-200 transition-colors"
              >
                <div className="flex items-center gap-3 mb-4">
                  <div className="p-2 bg-white rounded-lg shadow-sm text-stone-700">
                    <stack.icon size={20} />
                  </div>
                  <h4 className="font-semibold text-stone-800">{stack.category}</h4>
                </div>
                <div className="flex flex-wrap gap-2">
                  {stack.items.map(item => (
                    <span key={item} className="px-3 py-1 bg-white rounded-md border border-stone-200 text-sm text-stone-600">
                      {item}
                    </span>
                  ))}
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default About;