import Image, { StaticImageData } from "next/image";
import work9 from "@/public/home/work9.jpg";

type Project = {
    title: string;
    category: string;
    image: StaticImageData;
};

const projects: Project[] = [
    { title: "Living Room", category: "Painting", image: work9 },
    { title: "Cafe Area", category: "Painting", image: work9 },
    { title: "Exterior Wall", category: "Painting", image: work9 },
    { title: "Building Work", category: "Painting", image: work9 },
];

export default function ProjectsMarquee() {
    // duplicate list for seamless loop
    const items = [...projects, ...projects];

    return (
        <section className="bg-white py-8 sm:py-12 lg:py-16">
            {/* Title */}
            <div className="mx-auto max-w-7xl px-4 sm:px-6 text-center">
                <p className="text-sm sm:text-base lg:text-xl font-semibold tracking-[0.15em] sm:tracking-[0.22em] text-red-500">
                    OUR WORKS
                </p>
                <h2 className="mt-2 sm:mt-3 text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-extrabold text-gray-900">
                    Recent Completed Projects
                </h2>
            </div>

            {/* Marquee */}
            <div className="mt-6 sm:mt-8 lg:mt-12 overflow-hidden">
                {/* pause animation when hovering the whole marquee area */}
                <div className="marquee-track hover:[animation-play-state:paused] cursor-pointer">
                    <div className="flex w-max gap-4 sm:gap-6 lg:gap-8 px-4 sm:px-6">
                        {items.map((p, idx) => (
                            <ProjectCard key={idx} project={p} />
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
}

function ProjectCard({ project }: { project: Project }) {
    return (
        <div className="group relative h-[280px] w-[320px] sm:h-[320px] sm:w-[380px] lg:h-[360px] lg:w-[430px] shrink-0 overflow-hidden rounded-xl sm:rounded-2xl bg-gray-100">
            {/* Image */}
            <Image
                src={project.image}
                alt={project.title}
                fill
                className="object-cover transition-transform duration-500 ease-out group-hover:scale-[1.03]"
            />

            {/* subtle overlay on hover */}
            <div className="absolute inset-0 bg-black/0 transition group-hover:bg-black/10" />

            {/* Hover info box (ONLY this card hover) */}
            <div
                className="
          absolute left-4 right-4 bottom-4 sm:left-6 sm:right-6 sm:bottom-6
          translate-y-[140%]
          rounded-xl sm:rounded-2xl bg-white px-4 py-4 sm:px-6 sm:py-5
          shadow-lg
          transition-transform duration-300 ease-out
          group-hover:translate-y-0
        "
            >
                <p className="text-base sm:text-lg font-extrabold text-gray-900">{project.title}</p>
                <p className="mt-1 text-xs sm:text-sm text-gray-600">{project.category}</p>

                {/* Red arrow */}
                <span className="absolute right-4 bottom-4 sm:right-5 sm:bottom-5 text-red-500 text-lg sm:text-xl">↗</span>
            </div>
        </div>
    );
}