"use client";
import { ExternalLink, Github } from "lucide-react";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useRef } from "react";

// Register Plugin
if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger);
}

const projects = [
  {
    title: "Family Chat",
    thumbnail: "/images/familychatThumb.png",
    tech: ["JavaScript", "Node.js", "Express.js", "MySQL", "JWT", "Socket.IO", "Web Push", "Data-less FCM", "React Native"],
    link: "https://drive.google.com/drive/folders/1gzcwQjmUgci1vK6U-HrwfUxSWnCaVjzn?usp=sharing",
    github: "https://github.com/mernshihab",
    description: "Built a secure real-time chat system with JWT-based authentication and Socket.IO messaging. Implemented real-time notifications using Web Push and data-less FCM for privacy (mobile fetches message data directly from server). Developed a React Native mobile app for seamless cross-platform communication.",
  },
  {
    title: "Vestora",
    thumbnail: "/images/vestora.png",
    tech: ["React.js", "JavaScript", "Redux", "Tailwind CSS", "Node.js/Express.js", "JWT", "MongoDB"],
    link: "https://vestora.com.bd/",
    github: "https://github.com/mernshihab",
    description: "Built a complete eCommerce workflow including product browsing, cart, checkout, and order tracking. Implemented secure user authentication with JWT and optimized performance using Redux for state management. Developed a custom admin dashboard for inventory and order management, enhancing operational efficiency.",
  },
  {
    title: "GTA VI Fan Site",
    thumbnail: "/images/GTA.png",
    tech: ["React", "GSAP", "Tailwind"],
    link: "https://gta-vi-six-eta.vercel.app/",
    github: "https://github.com/mernshihab",
    description: "Created a visually engaging fan site for GTA VI using React and GSAP for smooth animations. Implemented responsive design with Tailwind CSS to ensure an optimal experience across devices. Integrated interactive elements like animated carousels and hover effects to enhance user engagement.",
  },
  {
    title: "Mustang World",
    thumbnail: "/images/mustang.png",
    tech: ["Next.js", "GSAP", "TypeScript", "Prisma"],
    link: "https://mustang-shihab.vercel.app/",
    github: "https://github.com/mernshihab",
    description: "Developed a Next.js application showcasing Mustang cars with dynamic content fetching using Prisma. Implemented smooth scroll-triggered animations with GSAP to enhance user experience. Utilized TypeScript for type safety and maintainability, ensuring a robust and scalable codebase.",
  },
];

export default function Projects() {
  const container = useRef(null);

  useGSAP(
    () => {
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: container.current,
          start: "top 80%",
          end: "bottom center",
          toggleActions: "play none none reverse",
        },
      });

      tl.to(".section-title", {
        opacity: 1,
        y: 0,
        duration: 0.6,
      }).to(
        ".project-card",
        {
          opacity: 1,
          y: 0,
          duration: 0.6,
          stagger: 0.2, // একটার পর একটা আসবে
          ease: "power2.out",
        },
        "-=0.4"
      );
    },
    { scope: container }
  );

  return (
    <section id="projects" ref={container} className="py-20">
      <div className="container mx-auto px-6">
        {/* Title Animation Setup */}
        <h2 className="section-title opacity-0 -translate-y-10 text-3xl md:text-4xl font-bold text-center mb-16">
          Featured{" "}
          <span className="text-green-600 dark:text-purple-500">Projects</span>
        </h2>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8">
          {projects.map((project, index) => (
            <div
              key={index}
              // Card Animation Setup
              className="project-card opacity-0 translate-y-10 group relative rounded-xl overflow-hidden border border-gray-200 dark:border-purple-900/30 bg-white dark:bg-gray-900 shadow-sm hover:shadow-lg transition-all duration-300"
            >
              {/* Project Image Placeholder */}
              <div className="h-72 bg-gray-200 dark:bg-gray-800 w-full group-hover:scale-105 transition-transform duration-500 flex items-center justify-center text-gray-400">
                <img src={project?.thumbnail} alt={project.title} className="w-full h-full object-cover" />
              </div>

              <div className="p-6">
                <div className="flex justify-between items-start mb-4">
                  <h3 className="text-2xl font-bold">{project.title}</h3>
                  <div className="flex gap-3">
                    {/* <a
                      href={project.github}
                      target="_blank"
                      className="p-2 bg-gray-100 dark:bg-gray-800 rounded-full hover:text-green-600 dark:hover:text-purple-400 transition hover:scale-110"
                    >
                      <Github size={20} />
                    </a> */}
                    <a
                      href={project.link}
                      target="_blank"
                      className="p-2 bg-gray-100 dark:bg-gray-800 rounded-full hover:text-green-600 dark:hover:text-purple-400 transition hover:scale-110"
                    >
                      <ExternalLink size={20} />
                    </a>
                  </div>
                </div>

                <p className="text-gray-600 dark:text-gray-300 mb-4">
                  {project.description}
                </p>

                <div className="flex flex-wrap gap-2">
                  {project.tech.map((t, i) => (
                    <span
                      key={i}
                      className="text-xs font-medium px-2 py-1 bg-green-100 dark:bg-purple-900/30 text-green-700 dark:text-purple-300 rounded"
                    >
                      {t}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* <div className="text-center mt-12 project-card opacity-0 translate-y-10">
          <a
            href="https://github.com/mernshihab"
            target="_blank"
            className="inline-block px-8 py-3 border border-green-500 dark:border-purple-500 text-green-600 dark:text-purple-400 rounded-full font-semibold hover:bg-green-50 dark:hover:bg-purple-900/20 transition hover:scale-105"
          >
            View All on GitHub
          </a>
        </div> */}
      </div>
    </section>
  );
}