"use client";
import { motion } from "framer-motion";
import Image from "next/image";
import Link from "next/link";
import { useSectionVisibility } from "@/hooks/useIntersectionObserver";
import { useApiQuery } from "@/hooks/api/useApiQuery";
import type { Project } from "@/types/models";

export default function LatestProjectsSection() {
  const { data: allProjectsData } = useApiQuery<Project[]>("/api/projects", {
    cacheTTL: 60 * 1000, // 1 minute (shorter cache for dynamic projects)
  });
  
  const allProjects = allProjectsData ?? [];
  const projects = allProjects.slice(0, 3);
  const isVisible = useSectionVisibility("projects-section");

  return (
    <section id="projects-section" className="relative py-24 overflow-hidden bg-[#030f18]">
      {/* Gradient border that fades from left to right */}
      <div className="absolute bottom-0 left-0 w-[85%] h-[1px] bg-gradient-to-r from-[#B87333] to-transparent" />

      {/* Background Elements */}
      <div className="absolute inset-0">
        <div className="absolute inset-0 opacity-5"></div>
      </div>

      {/* Floating Elements */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-[#B87333]/10 rounded-full blur-3xl animate-float"></div>
        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-[#B87333]/10 rounded-full blur-3xl animate-float-delayed"></div>
      </div>

      <div className="max-w-7xl mx-auto px-4 relative">
        {/* Section Header */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isVisible ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <h2 className="text-4xl md:text-5xl font-bold text-white mb-4">Our Latest Projects</h2>
          <div className="w-20 h-1 bg-gradient-to-r from-[#B87333] to-[#ff914d] mx-auto rounded-full" />
          <p className="mt-6 text-gray-300 text-lg max-w-2xl mx-auto">
            Discover our most recent landscape lighting transformations that have brought our clients' visions
            to life.
          </p>
        </motion.div>

        {/* Projects Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {projects.map((project, index) => (
            <motion.div
              key={project.id}
              initial={{ opacity: 0, y: 30 }}
              animate={isVisible ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, delay: index * 0.2 }}
              className="group relative"
            >
              <div className="relative aspect-[4/3] overflow-hidden rounded-md border border-[#B87333]/30">
                <Image
                  src={project.coverImage?.replace("/uploads/", "/api/uploads/") || "/images/placeholder.webp"}
                  alt={project.name}
                  fill
                  sizes="(max-width: 768px) 100vw, 33vw"
                  className="object-cover transform transition-transform duration-700 group-hover:scale-110"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent">
                  <div className="absolute bottom-0 left-0 right-0 p-6">
                    <h3 className="text-2xl font-bold text-white mb-2">{project.name}</h3>
                    <p className="text-gray-200 text-sm mb-4">
                      {project.shortDescription || project.description}
                    </p>
                    <Link
                      href={`/projects/${project.id}`}
                      className="inline-flex items-center text-[#B87333] hover:text-[#A05A2C] transition-colors"
                    >
                      View Project
                      <svg
                        className="w-5 h-5 ml-2 transform group-hover:translate-x-1 transition-transform"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M17 8l4 4m0 0l-4 4m4-4H3"
                        />
                      </svg>
                    </Link>
                  </div>
                </div>
              </div>
            </motion.div>
          ))}
        </div>

        {/* View All Button */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isVisible ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6, delay: 0.6 }}
          className="text-center mt-12"
        >
          <Link
            href="/projects"
            className="inline-flex items-center px-8 py-4 rounded-full bg-[#B87333] text-white font-semibold hover:bg-[#A05A2C] hover:shadow-lg hover:shadow-[#B87333]/30 hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-[#B87333] focus:ring-offset-2 focus:ring-offset-[#030f18]"
          >
            View All Projects
            <svg
              className="w-5 h-5 ml-2 transform group-hover:translate-x-1 transition-transform"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M17 8l4 4m0 0l-4 4m4-4H3"
              />
            </svg>
          </Link>
        </motion.div>
      </div>
    </section>
  );
}
