techzaa-frontend/src/components/ProjectsSection.tsx

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

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"
        >
          <span className="inline-block px-5 py-2 rounded-full glass text-sm font-medium text-primary mb-4 tracking-widest">
            OUR PORTFOLIO
          </span>
          <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
            Featured{" "}
            <span className="text-primary neon-text-glow">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>
  );
}

function ProjectCard({ project, color, index, isInView }) {
  const [mousePosition, setMousePosition] = useState({ x: 50, y: 50 });
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width) * 100;
    const y = ((e.clientY - rect.top) / rect.height) * 100;
    setMousePosition({ x, y });
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 60, rotateX: 15 }}
      animate={isInView ? { opacity: 1, y: 0, rotateX: 0 } : {}}
      transition={{ duration: 0.6, delay: index * 0.08 }}
      whileHover={{ scale: 1.02 }}
      className="group relative rounded-3xl overflow-hidden cursor-pointer h-full"
      onMouseMove={handleMouseMove}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => {
        setIsHovered(false);
        setMousePosition({ x: 50, y: 50 });
      }}
    >
      {/* Main Card Container with 3D Tilt */}
      <div
        className="relative h-full rounded-3xl overflow-hidden shadow-2xl transition-transform duration-300"
        style={{
          transform: isHovered
            ? `perspective(1000px) rotateX(${(50 - mousePosition.y) * 0.12}deg) rotateY(${(mousePosition.x - 50) * 0.15}deg)`
            : "perspective(1000px) rotateX(0deg) rotateY(0deg)",
          transition: isHovered
            ? "transform 0.1s ease-out"
            : "transform 0.4s ease-out",
        }}
      >
        {/* Image Container */}
        <div className="aspect-[16/13] overflow-hidden relative">
          <img
            src={project.image}
            alt={project.title}
            className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
          />

          {/* Dynamic Shine Overlay */}
          <div
            className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-300 pointer-events-none"
            style={{
              background: `radial-gradient(circle at ${mousePosition.x}% ${mousePosition.y}%, rgba(255,255,255,0.8) 0%, transparent 60%)`,
            }}
          />
        </div>

        {/* Gradient Overlay */}
        <div
          className={`absolute inset-0 bg-gradient-to-t ${color} via-black/40 to-transparent opacity-60 group-hover:opacity-90 transition-all duration-500`}
        />

        {/* Content */}
        <div className="absolute inset-0 flex flex-col justify-end p-8">
          <div className="space-y-4 transform transition-all duration-500 group-hover:translate-y-0">
            {/* Category */}
            <motion.span
              initial={{ opacity: 0, y: 20 }}
              animate={
                isHovered ? { opacity: 1, y: 0 } : { opacity: 0.7, y: 10 }
              }
              className="inline-block px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md text-white text-xs font-medium border border-white/20"
            >
              {project.category}
            </motion.span>

            {/* Title */}
            <h3 className="text-2xl md:text-3xl font-bold text-white leading-tight tracking-tight">
              {project.title}
            </h3>

            {/* View Project Link */}
            <Link
              to={project.liveUrl}
              className="flex items-center gap-3 text-white/80 group-hover:text-white transition-colors"
            >
              <span className="font-medium text-sm tracking-wider">live</span>
              <ExternalLink className="w-5 h-5 transition-transform group-hover:rotate-45" />
            </Link>
          </div>
        </div>

        {/* Neon Border Glow */}
        <div className="absolute inset-0 rounded-3xl border-2 border-transparent group-hover:border-primary/60 transition-all duration-500 pointer-events-none neon-glow" />
      </div>
    </motion.div>
  );
}