jaecoo-cihampelas/components/landing-page/items.tsx

"use client";

import Image from "next/image";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import Link from "next/link";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "../ui/dialog";
import { Input } from "../ui/input";
import { Textarea } from "../ui/textarea";
import { useState } from "react";

const items = [
  {
    image: "/new-car2.png",
    title: "JAECOO J7 SHS-P",
    description: "DELICATE OFF-ROAD SUV",
    link: "/product/j7-awd",
  },
  {
    image: "/new-car1.png",
    title: "JAECOO J5 EV",
    description: "SUPER HYBRID SYSTEM = SUPER HEV + EV",
    link: "/product/j7-shs",
  },
  {
    image: "/new-car3.png",
    title: "JAECOO J8 SHS-P ARDIS",
    description: "FIRST CLASS OFF-ROAD",
    link: "/product/j8-awd",
  },
];

export default function Items() {
  const [open, setOpen] = useState(false);
  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 }}
                >
                  <Dialog open={open} onOpenChange={setOpen}>
                    <DialogTrigger asChild>
                      <Button className="bg-[#1F6779] text-white h-[30px] md:h-[40px] rounded-full hover:cursor-pointer">
                        TEST DRIVE
                      </Button>
                    </DialogTrigger>
                    <DialogContent className="sm:max-w-[1400px] h-[600px]">
                      <div className="flex items-center gap-4">
                        <Image
                          src="/masjaecoonav.png"
                          alt="MAS JAECOO Logo"
                          width={300}
                          height={30}
                          className=" object-fill"
                        />
                      </div>
                      <DialogHeader>
                        <DialogTitle className="text-2xl text-center mb-4">
                          FORM TEST DRIVE
                        </DialogTitle>
                      </DialogHeader>

                      {/* Form */}
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-10">
                        <Input placeholder="Nama" />
                        <Input placeholder="Email" />
                        <Input placeholder="Mobile Number" />
                        <Input placeholder="Location" />
                      </div>

                      <div className="mt-3 px-10">
                        <Textarea placeholder="Full Message" rows={4} />
                      </div>

                      <div className="mt-6 text-left ml-10">
                        <Button
                          onClick={() => setOpen(false)}
                          className="bg-[#1F6779] text-white rounded-full"
                        >
                          SEND INQUIRY
                        </Button>
                      </div>
                    </DialogContent>
                  </Dialog>
                  <Link href={item?.link}>
                    <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>
  );
}