"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 HeaderProductJ7Shs() {
  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 = [
    "/jj7-blue.png",
    "/jj7-white.png",
    "/jj7-silver.png",
    "/jj7-black.png",
  ];

  const gradients = [
    "linear-gradient(to bottom, #527D97, #527D97)",
    "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-[300px] sm:h-[400px] md:h-[800px] overflow-hidden">
            <Image
              src="/shs-header.png"
              alt="about-header"
              fill
              className="object-cover"
              sizes="(max-width: 768px) 100vw, 640px"
              priority
            />

            <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center gap-3">
              <Link
                href="https://cms.jaecoo.id/uploads/Flyer_J7_SHS_6db27c3a25.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 J7 SHS-P &body=Halo Jaecoo,%0D%0A%0D%0ASaya tertarik untuk melakukan test drive kendaraan J7 SHS-P.%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>
    </>
  );
}