jaecoo-kelapagading/components/landing-page/header-product-j8-awd.tsx

"use client";

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

export default function HeaderProductJ8Awd() {
  const [open, setOpen] = useState(false);
  const [selectedColorIndex, setSelectedColorIndex] = useState(0);
  const [openBrosur, setOpenBrosur] = useState(false);
  // const fileId = "1Nici3bdjUG524sUYQgHfbeO63xW6f1_o";
  // const fileLink = `https://drive.google.com/file/d/${fileId}/view`;
  // const embedLink = `https://drive.google.com/file/d/${fileId}/preview`;
  // const downloadLink = `https://drive.google.com/uc?export=download&id=${fileId}`;

  const images = ["/green.png", "/silver.png", "/white.png", "/black.png"];

  const gradients = [
    "linear-gradient(to bottom, #527D97, #1F6779)",
    "linear-gradient(to bottom, #FFFFFF, #FFFFFF)",
    "linear-gradient(to bottom, #E1ECF4, #FFFFFF)",
    "linear-gradient(to bottom, #1A1A1A, #3A3A3A)",
  ];
  return (
    <>
      <section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="flex flex-col items-center gap-6"
        >
          <div className="relative w-full h-[200px] sm:h-[300px] md:h-[500px] lg:h-[700px] overflow-hidden">
            <Image
              src="/awd-8.png"
              alt="about-header"
              fill
              className="object-cover object-center"
              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 100vw, 1400px"
              priority
            />

            <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center gap-3">
              {/* <Dialog open={openBrosur} onOpenChange={setOpenBrosur}>
                <DialogTrigger asChild>
                  <Button className="bg-white text-black border w-[100px] h-[30px] md:w-[200px] md:h-[40px] rounded-xl hover:bg-amber-50 hover:cursor-pointer">
                    BROSUR
                  </Button>
                </DialogTrigger>

                <DialogContent className=" w-full p-0 overflow-hidden">
                  <div className="flex justify-end p-4 bg-white z-50">
                    <a
                      href={downloadLink}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="absolute top-2 right-3 z-50 bg-black text-white p-2 rounded hover:bg-gray-800 mb-3"
                    >
                      <Download size={18} />
                    </a>
                  </div>

                  <iframe
                    src={embedLink}
                    className="w-full h-[70vh] border-t"
                    allow="autoplay"
                  ></iframe>
                </DialogContent>
              </Dialog> */}
              <Link
                href="https://cms.jaecoo.id/uploads/J8_SHS_ARDIS_Flyer_cbf280ea77.pdf"
                target="_blank"
                rel="noopener noreferrer"
              >
                <Button className="bg-white text-black border w-[100px] h-[30px] md:w-[200px] md:h-[40px] rounded-xl hover:bg-amber-50 hover:cursor-pointer">
                  BROSUR
                </Button>
              </Link>
              <Link
                href={`mailto:jaecookelapagading@gmail.com?subject=Test Drive J8 SHS-P ARDIS &body=Halo Jaecoo,%0D%0A%0D%0ASaya tertarik untuk melakukan test drive kendaraan J8 SHS-P ARDIS.%0D%0A%0D%0ANama:%0D%0ANomor HP:%0D%0ALokasi:%0D%0A%0D%0ATerima kasih.`}
              >
                <Button className="bg-[#1F6779] text-white h-[30px] md:h-[40px] rounded-full hover:cursor-pointer">
                  TEST DRIVE
                </Button>
              </Link>
            </div>
          </div>
        </motion.div>
      </section>

      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.5, duration: 0.8 }}
        className="relative w-full h-[200px] sm:h-[400px] md:h-[740px] overflow-hidden"
      >
        <div className="relative w-full h-[200px] sm:h-[300px] md:h-[740px] lg:h-[740px]">
          <Image
            src={images[selectedColorIndex]}
            alt="about-header"
            fill
            className="object-cover"
            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 100vw, 1400px"
            priority
          />
        </div>

        <motion.div
          initial={{ opacity: 0, x: -40 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ delay: 0.8, duration: 0.6 }}
          className="absolute top-32 md:top-1/2 left-14 md:left-56 transform -translate-y-1/2 flex flex-col gap-4 z-10"
        >
          {gradients.map((bg, index) => (
            <motion.button
              key={index}
              onClick={() => setSelectedColorIndex(index)}
              whileHover={{ scale: 1.1 }}
              whileTap={{ scale: 0.95 }}
              className={`w-4 h-4 md:w-6 md:h-6 rounded-full border-2 ${
                selectedColorIndex === index ? "border-black" : "border-white"
              } shadow-md hover:cursor-pointer`}
              style={{ background: bg }}
              aria-label={`Pilih warna ${index + 1}`}
            />
          ))}
        </motion.div>
      </motion.div>
    </>
  );
}