"use client";

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Code, Database, Cloud, Smartphone, Globe, Zap, Brain, Rocket } from 'lucide-react';

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

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

  const skills = [
    {
      category: 'Frontend',
      icon: Code,
      technologies: ['React', 'Next.js', 'TypeScript', 'Tailwind CSS', 'Framer Motion'],
      color: 'from-blue-500 to-cyan-500'
    },
    {
      category: 'Backend',
      icon: Database,
      technologies: ['Node.js', 'PostgreSQL', 'Prisma', 'REST APIs', 'GraphQL'],
      color: 'from-purple-500 to-pink-500'
    },
    {
      category: 'DevOps',
      icon: Cloud,
      technologies: ['Docker', 'CI/CD', 'Nginx', 'Redis', 'AWS'],
      color: 'from-green-500 to-emerald-500'
    },
    {
      category: 'Mobile',
      icon: Smartphone,
      technologies: ['React Native', 'Expo', 'iOS', 'Android'],
      color: 'from-orange-500 to-red-500'
    },
  ];

  const values = [
    {
      icon: Brain,
      title: 'Problem Solving',
      description: 'I love tackling complex challenges and finding elegant solutions.'
    },
    {
      icon: Zap,
      title: 'Performance',
      description: 'Building fast, efficient applications that scale with your needs.'
    },
    {
      icon: Rocket,
      title: 'Innovation',
      description: 'Always exploring new technologies and best practices.'
    },
    {
      icon: Globe,
      title: 'User Experience',
      description: 'Creating intuitive interfaces that users love to interact with.'
    },
  ];

  if (!mounted) {
    return null;
  }

  return (
    <section id="about" className="py-20 px-4 relative overflow-hidden">
      <div className="max-w-7xl mx-auto">
        {/* Section Header */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
          className="text-center mb-16"
        >
          <h2 className="text-4xl md:text-5xl font-bold mb-6 gradient-text">
            About Me
          </h2>
          <p className="text-xl text-gray-400 max-w-3xl mx-auto leading-relaxed">
            I&apos;m a passionate software engineer with a love for creating beautiful, 
            functional applications. I enjoy working with modern technologies and 
            turning ideas into reality.
          </p>
        </motion.div>

        {/* About Content */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-20">
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="space-y-6"
          >
            <h3 className="text-3xl font-bold text-white mb-4">My Journey</h3>
            <p className="text-gray-300 leading-relaxed text-lg">
              I&apos;m a student and software engineer based in Osnabrück, Germany. 
              My passion for technology started early, and I&apos;ve been building 
              applications ever since.
            </p>
            <p className="text-gray-300 leading-relaxed text-lg">
              I specialize in full-stack development, with a focus on creating 
              modern, performant web applications. I&apos;m always learning new 
              technologies and improving my skills.
            </p>
            <p className="text-gray-300 leading-relaxed text-lg">
              When I&apos;m not coding, I enjoy exploring new technologies, contributing 
              to open-source projects, and sharing knowledge with the developer community.
            </p>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="space-y-6"
          >
            <h3 className="text-3xl font-bold text-white mb-4">What I Do</h3>
            <div className="grid grid-cols-2 gap-4">
              {values.map((value, index) => (
                <motion.div
                  key={value.title}
                  initial={{ opacity: 0, scale: 0.9 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  whileHover={{ y: -5, scale: 1.02 }}
                  className="p-6 rounded-xl glass-card"
                >
                  <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-500 rounded-lg flex items-center justify-center mb-4">
                    <value.icon className="w-6 h-6 text-white" />
                  </div>
                  <h4 className="text-lg font-semibold text-white mb-2">{value.title}</h4>
                  <p className="text-sm text-gray-400 leading-relaxed">{value.description}</p>
                </motion.div>
              ))}
            </div>
          </motion.div>
        </div>

        {/* Skills Section */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
          className="mb-16"
        >
          <h3 className="text-3xl font-bold text-white mb-8 text-center">Skills & Technologies</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {skills.map((skill, index) => (
              <motion.div
                key={skill.category}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
                whileHover={{ y: -8, scale: 1.02 }}
                className="glass-card p-6 rounded-2xl"
              >
                <div className={`w-14 h-14 bg-gradient-to-br ${skill.color} rounded-xl flex items-center justify-center mb-4`}>
                  <skill.icon className="w-7 h-7 text-white" />
                </div>
                <h4 className="text-xl font-bold text-white mb-4">{skill.category}</h4>
                <div className="space-y-2">
                  {skill.technologies.map((tech) => (
                    <div
                      key={tech}
                      className="px-3 py-1.5 bg-gray-800/50 rounded-lg text-sm text-gray-300 border border-gray-700/50"
                    >
                      {tech}
                    </div>
                  ))}
                </div>
              </motion.div>
            ))}
          </div>
        </motion.div>
      </div>
    </section>
  );
};

export default About;