"use client";

import Image from "next/image";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import Link from "next/link";

const items = [
  {
    image: "/new-car2.png",
    title: "JAECOO J7 AWD",
    description: "DELICATE OFF-ROAD SUV",
  },
  {
    image: "/new-car1.png",
    title: "JAECOO J7 SHS",
    description: "SUPER HYBRID SYSTEM = SUPER HEV + EV",
  },
  {
    image: "/new-car3.png",
    title: "JAECOO J8 AWD",
    description: "FIRST CLASS OFF-ROAD",
  },
];

export default function Items() {
  return (
    <section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
      <div className="flex flex-col items-center gap-10">
        {items.map((item, index) => (
          <motion.div
            key={index}
            initial={{ opacity: 0, y: 50 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{
              duration: 0.7,
              delay: index * 0.2,
              ease: "easeOut",
            }}
            className="relative w-full min-h-[400px] sm:min-h-[500px] md:min-h-[600px] overflow-hidden"
          >
            <Image
              src={item.image}
              alt={item.title}
              fill
              className="object-cover"
              sizes="(max-width: 768px) 100vw, 768px"
              priority
            />

            <div className="absolute inset-0 z-10 flex flex-col justify-between">
              <motion.div
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: index * 0.25 + 0.3, duration: 0.5 }}
                className="mt-3 ml-3 font-semibold text-white text-sm sm:text-xl px-4 py-2 rounded-lg max-w-[80%]"
              >
                {item.description}
              </motion.div>

              <div className="flex flex-col items-center pb-8 bg-gradient-to-t  to-transparent">
                <motion.h1
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: index * 0.25 + 0.4, duration: 0.6 }}
                  className="text-2xl sm:text-3xl md:text-2xl font-semibold text-white mb-4 text-center"
                >
                  {item.title}
                </motion.h1>
                <motion.div
                  className="flex items-center gap-4"
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: index * 0.25 + 0.6, duration: 0.6 }}
                >
                  <Link href="/about">
                    <Button className="rounded-full bg-[#155B6E] px-6 py-2 text-white hover:cursor-pointer">
                      TEST DRIVE
                    </Button>
                  </Link>
                  <Link href="/product">
                    <Button
                      variant="outline"
                      className="rounded-full border-white text-black px-6 py-2 hover:text-black hover:bg-amber-50 hover:border-white hover:cursor-pointer"
                    >
                      EXPLORE
                    </Button>
                  </Link>
                </motion.div>
              </div>
            </div>
          </motion.div>
        ))}
      </div>
    </section>
  );
}