import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
import { useRef, useMemo, memo } from "react";
import { Code2, Sparkles, Zap, Rocket, Brain, Target, Users, ExternalLink } from "lucide-react";

const AboutSection = memo(() => {
  const highlights = useMemo(() => [
    {
      icon: Zap,
      title: "3+ Years Experience",
      description: "Hands-on development experience building real-world applications",
      color: "from-yellow-500/20 to-orange-500/20",
      iconColor: "text-white",
    },
    {
      icon: Code2,
      title: "Self-Taught Developer",
      description: "Passionate about continuous learning and staying up-to-date with technologies",
      color: "from-white/20 to-gray-200/20",
      iconColor: "text-white",
    },
    {
      icon: Sparkles,
      title: "AI Integration Expert",
      description: "Specialized in integrating AI solutions to solve complex business problems",
      color: "from-purple-500/20 to-pink-500/20",
      iconColor: "text-white",
    },
    {
      icon: Rocket,
      title: "Fast Delivery",
      description: "Efficient development process with focus on quality and speed",
      color: "from-green-500/20 to-emerald-500/20",
      iconColor: "text-white",
    },
    {
      icon: Brain,
      title: "Problem Solver",
      description: "Creative solutions to complex technical challenges",
      color: "from-white/20 to-gray-200/20",
      iconColor: "text-white",
    },
    {
      icon: Target,
      title: "Result Oriented",
      description: "Focus on delivering value and achieving business goals",
      color: "from-red-500/20 to-rose-500/20",
      iconColor: "text-white",
    },
  ], []);

  return (
    <section id="about" className="py-16 sm:py-20 md:py-24 px-4 sm:px-6 lg:px-12 relative overflow-hidden bg-[#0a0a0a]" aria-label="About section">
      {/* Background gradient */}
      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#111111]/20 to-transparent" />

      <div className="container max-w-7xl mx-auto relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4">
            About <span className="text-gradient">Me</span>
          </h2>
          <div className="w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent mx-auto rounded-full" />
        </motion.div>

        <div className="grid lg:grid-cols-2 gap-12 items-start">
          {/* Text content - Left side */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: "-100px" }}
            transition={{ duration: 0.6 }}
            className="space-y-6"
          >
            <motion.p
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.2, duration: 0.6 }}
              className="text-base sm:text-lg text-muted-foreground leading-relaxed"
            >
              I am <span className="text-foreground font-semibold">Zikirulloh Zoxidbekov</span>, a <span className="text-foreground font-semibold">software engineer and full stack developer</span> with 
              3+ years of hands-on experience. I specialize in building modern web applications using 
              <span className="text-primary font-medium"> React</span>, <span className="text-primary font-medium">Node.js</span>, 
              and integrating <span className="text-primary font-medium">AI solutions</span> to solve real business problems.
            </motion.p>
            <motion.p
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.3, duration: 0.6 }}
              className="text-base sm:text-lg text-muted-foreground leading-relaxed"
            >
              My journey started with building my personal online store, which transformed into a passion for creating 
              elegant, scalable solutions. I believe in clean code, user-centric design, 
              and continuous improvement.
            </motion.p>
            <motion.p
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.4, duration: 0.6 }}
              className="text-base sm:text-lg text-muted-foreground leading-relaxed"
            >
              I work remotely and am experienced in collaborating with distributed teams across different time zones. 
              I'm comfortable with asynchronous communication, self-management, and delivering high-quality work independently.
            </motion.p>
          </motion.div>

          {/* Two highlight cards - Right side */}
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true, margin: "-100px" }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="space-y-6"
          >
            {highlights.slice(0, 2).map((item, index) => (
              <InteractiveCard key={item.title} item={item} index={index} />
            ))}
          </motion.div>
        </div>

        {/* Remaining highlight cards - Bottom */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 mt-8 sm:mt-12">
          {highlights.slice(2).map((item, index) => (
            <InteractiveCard key={item.title} item={item} index={index + 2} />
          ))}
        </div>

        {/* CoderBro Team Info - Separate Section */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          transition={{ duration: 0.6, delay: 0.3 }}
          className="mt-16"
        >
          <div className="glass-card rounded-2xl p-6 sm:p-8 border-primary/20 hover:border-primary/50 transition-all duration-300 w-full">
            <div className="flex flex-col sm:flex-row items-start gap-4 sm:gap-6">
              <div className="p-4 rounded-xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 shrink-0">
                <Users className="h-8 w-8 text-white" />
              </div>
              <div className="flex-1">
                <div className="flex items-center gap-2 mb-3">
                  <h3 className="font-semibold text-xl text-foreground">
                    CoderBro Team
                  </h3>
                  
                </div>
                <p className="text-muted-foreground leading-relaxed mb-4">
                  I'm proud to be part of the <span className="text-foreground font-medium">CoderBro Team</span>, 
                  where we collaborate to build innovative solutions and deliver exceptional results. 
                  Working with a talented team allows me to grow continuously and contribute to 
                  meaningful projects.
                </p>
                <a
                  href="https://coderbro.dev"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-primary text-sm font-medium hover:underline inline-flex items-center gap-2"
                >
                  coderbro.dev
                  <ExternalLink className="h-4 w-4" />
                </a>
              </div>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
});

// Interactive 3D card component
const InteractiveCard = ({ item, index }: { item: any; index: number }) => {
  const ref = useRef<HTMLDivElement>(null);
  const x = useMotionValue(0);
  const y = useMotionValue(0);
  const mouseXSpring = useSpring(x, { stiffness: 500, damping: 100 });
  const mouseYSpring = useSpring(y, { stiffness: 500, damping: 100 });
  const rotateX = useTransform(mouseYSpring, [-0.5, 0.5], ["7.5deg", "-7.5deg"]);
  const rotateY = useTransform(mouseXSpring, [-0.5, 0.5], ["-7.5deg", "7.5deg"]);

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    const width = rect.width;
    const height = rect.height;
    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;
    const xPct = mouseX / width - 0.5;
    const yPct = mouseY / height - 0.5;
    x.set(xPct);
    y.set(yPct);
  };

  const handleMouseLeave = () => {
    x.set(0);
    y.set(0);
  };

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-50px" }}
      transition={{ duration: 0.5, delay: 0.1 * index }}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      style={{
        rotateX,
        rotateY,
        transformStyle: "preserve-3d",
      }}
      whileHover={{ z: 50 }}
      className="perspective-1000"
    >
      <div className="transform-3d glass-card rounded-2xl p-6 hover:border-primary/50 transition-all duration-300 group cursor-pointer h-full">
        <div className="flex flex-col gap-4">
          <motion.div
            className={`p-4 rounded-xl bg-gradient-to-br ${item.color} w-fit`}
            whileHover={{ scale: 1.1, rotate: 5 }}
            transition={{ type: "spring", bounce: 0.5 }}
          >
            <item.icon className={`h-6 w-6 ${item.iconColor}`} />
          </motion.div>
          <div>
            <h3 className="font-semibold text-lg mb-2 group-hover:text-primary transition-colors">
              {item.title}
            </h3>
            <p className="text-muted-foreground text-sm leading-relaxed">
              {item.description}
            </p>
          </div>
        </div>
      </div>
    </motion.div>
  );
};

AboutSection.displayName = "AboutSection";

export default AboutSection;