import { ExternalLink, Github, Laptop } from "lucide-react";
import { motion } from "framer-motion";
import { HoverButton } from "@/components/ui/hover-button";
import { AnimatedSection, AnimatedContainer, AnimatedItem } from "@/components/ui/animated-section";
import { fadeInUp, slideInUp, staggerContainer, staggerItem } from "@/lib/animations";
import { useParallax } from "@/hooks/useScrollAnimation";

const Projects = () => {
  const projects = [
    {
      id: 1,
      title: "AI-powered content generation",
      description: "Creator AI is an AI-powered content generation application",
      image: "https://i.ibb.co/3J1LhgT/Screenshot-2025-11-13-011217.png",
      tech: ["React", "Liveblocks", "Yjs", "Drizzle", "Node.js"],
      github: "https://github.com/Abhishek-ch30/Ai_automation",
      demo: "https://ai-automation-1vmt.onrender.com/"
    },
    {
      id: 2,
      title: "Business Website",
      description: "Built for IT solution business to provide web app development services",
      image: "https://i.ibb.co/CddH1Rr/Screenshot-2025-11-13-011605.png",
      tech: ["React", "Tailwind CSS", "Supabase"],
      github: "https://github.com/Abhishek-ch30/ElevateEdge_main_web",
      demo: "https://elevate-edge-main-web.vercel.app/"
    },
    {
      id: 3,
      title: "Student Portal",
      description: "Centralized platform for students to access resources, assignments, and announcements.",
      image: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&q=80",
      tech: ["Vue.js", "Firebase", "Tailwind CSS"],
      github: "#",
      demo: "#",
      author: "Team Nova",
    },
    {
      id: 4,
      title: "Algorithm Visualizer",
      description: "Interactive tool to visualize sorting and searching algorithms with step-by-step execution.",
      image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80",
      tech: ["React", "D3.js", "Framer Motion"],
      github: "#",
      demo: "#",
      author: "Team Eclipse",
    },
  ];

  const { ref: parallaxRef, offset } = useParallax(0.3);
  
  return (
    <section id="projects" className="py-24 relative overflow-hidden">

      <div className="container mx-auto px-6 relative z-10">
        <AnimatedSection animation={fadeInUp} className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold text-primary-text mb-4">
            Project Showcase
          </h2>
          <p className="text-lg text-secondary-text max-w-2xl mx-auto">
            Innovative projects built by our talented members
          </p>
        </AnimatedSection>

        <AnimatedContainer
          stagger={true}
          staggerDelay={0.3}
          className="grid grid-cols-1 lg:grid-cols-2 gap-8"
        >
          {projects.map((project, index) => (
            <AnimatedItem
              key={project.id}
              animation={slideInUp}
              index={index}
            >
              <motion.div
                className="glass-card rounded-3xl overflow-hidden h-full"
                whileHover={{
                  scale: 1.02,
                  y: -10,
                  rotateY: 2,
                }}
                transition={{ duration: 0.4 }}
              >
                <div className="relative aspect-video overflow-hidden">
                  <motion.img
                    src={project.image}
                    alt={project.title}
                    className="w-full h-full object-cover"
                    whileHover={{ scale: 1.1 }}
                    transition={{ duration: 0.6 }}
                  />
                  <motion.div
                    className="absolute top-4 right-4 glass-card px-3 py-1 rounded-full"
                    whileHover={{ scale: 1.05 }}
                    transition={{ duration: 0.2 }}
                  >
                    <div className="flex items-center gap-2">
                      <motion.div
                        whileHover={{ rotate: 360 }}
                        transition={{ duration: 0.5 }}
                      >
                        <Laptop size={16} className="text-accent" />
                      </motion.div>
                      <span className="text-sm font-medium text-primary-text">
                        {project.author}
                      </span>
                    </div>
                  </motion.div>
                </div>

                <div className="p-8">
                  <motion.h3
                    className="text-2xl font-bold text-primary-text mb-3"
                    whileHover={{ color: "var(--primary)" }}
                    transition={{ duration: 0.2 }}
                  >
                    {project.title}
                  </motion.h3>
                  <p className="text-secondary-text mb-6">{project.description}</p>

                  <motion.div
                    className="flex flex-wrap gap-2 mb-6"
                    variants={staggerContainer}
                    initial="hidden"
                    whileInView="visible"
                    viewport={{ once: true }}
                  >
                    {project.tech.map((tech) => (
                      <motion.span
                        key={tech}
                        className="px-3 py-1 bg-accent/10 text-accent rounded-full text-sm font-medium cursor-pointer"
                        variants={staggerItem}
                        whileHover={{
                          scale: 1.1,
                          backgroundColor: "rgba(59, 130, 246, 0.2)"
                        }}
                        transition={{ duration: 0.2 }}
                      >
                        {tech}
                      </motion.span>
                    ))}
                  </motion.div>

                  <div className="flex gap-4">
                    <motion.a
                      href={project.github}
                      className="flex items-center gap-2 px-4 py-2 border-2 border-accent text-accent rounded-xl transition-colors"
                      whileHover={{
                        backgroundColor: "var(--accent)",
                        color: "white",
                        scale: 1.05
                      }}
                      whileTap={{ scale: 0.95 }}
                      transition={{ duration: 0.2 }}
                    >
                      <motion.div
                        whileHover={{ rotate: 360 }}
                        transition={{ duration: 0.3 }}
                      >
                        <Github size={18} />
                      </motion.div>
                      <span className="font-medium">Code</span>
                    </motion.a>
                    
                    <a 
                      href={project.demo} 
                      target="_blank" 
                      rel="noopener noreferrer"
                      className="inline-block"
                    >
                      <HoverButton className="flex items-center gap-2">
                        <motion.div
                          whileHover={{ scale: 1.2 }}
                          transition={{ duration: 0.2 }}
                        >
                          <ExternalLink size={18} />
                        </motion.div>
                        <span className="font-medium">Live Demo</span>
                      </HoverButton>
                    </a>
                  </div>
                </div>
              </motion.div>
            </AnimatedItem>
          ))}
        </AnimatedContainer>
      </div>
    </section>
  );
};

export default Projects;