import { Button } from "@/components/ui/button";
import { useProjects } from "@/hooks/queires/useProjects";
import { motion, useInView } from "framer-motion";
import { ArrowRight } from "lucide-react";
import { useRef } from "react";
import { Link } from "react-router-dom";
import { ProjectCard } from "./ProjectCard";
import PremiumBadge from "../shared/PremiumBadge";

const gradientColors = [
  "from-neon-blue/90",
  "from-neon-purple/90",
  "from-neon-green/90",
  "from-neon-pink/90",
];

export default function ProjectsSection() {
  const { data: projectsData } = useProjects({
    fields: "category, title, image, liveUrl",
    limit: 6,
  });

  const projects = projectsData?.data.data.result || [];

  const ref = useRef<HTMLElement>(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });

  return (
    <section
      id="projects"
      ref={ref}
      className="py-24 relative overflow-hidden bg-secondary/30"
    >
      {/* Background Pattern */}
      <div className="absolute inset-0 opacity-5">
        <div
          className="absolute inset-0"
          style={{
            backgroundImage: `radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0)`,
            backgroundSize: "40px 40px",
          }}
        />
      </div>

      <div className="container mx-auto px-4 relative z-10">
        {/* Section Header */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.7 }}
          className="text-center mb-20"
        >
         <PremiumBadge text="our projects"/>
          <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
            Featured <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground">Projects</span>
          </h2>
          <p className="text-muted-foreground max-w-2xl mx-auto text-lg">
            Crafted with passion. Delivered with excellence.
          </p>
        </motion.div>

        {/* Projects Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
          {projects.map((project, index) => {
            const color = gradientColors[index % gradientColors.length];

            return (
              <ProjectCard
                key={project._id}
                project={project}
                color={color}
                index={index}
                isInView={isInView}
              />
            );
          })}
        </div>

        {/* See All Button */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.7, delay: 0.3 }}
          className="flex justify-center"
        >
          <Link to="/projects">
            <Button
              size="lg"
              className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold px-10 py-7 text-lg rounded-full neon-glow hover:neon-glow-strong transition-all group flex items-center gap-3"
            >
              Explore All Projects
              <ArrowRight className="w-6 h-6 group-hover:translate-x-1 transition-transform" />
            </Button>
          </Link>
        </motion.div>
      </div>
    </section>
  );
}