"use client";

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

export default function HeaderPriceInformation() {
  const [open, setOpen] = useState(false);
  const cars = [
    {
      title: "JAECOO J7 SHS-P",
      image: "/j7-awd-nobg.png",
      price: "Rp 509.900.000",
      oldPrice: "Rp 509.900.000",
      capacity: "18.3kWh",
      power: "-",
      torque: "310 N.m",
      wheels: `19"`,
      seats: "Leather",
      display: `14.8"`,
    },
    {
      title: "JAECOO J5 EV",
      image: "/j7-shs-nobg.png",
      price: "Rp 299.900.000",
      oldPrice: "Rp 299.900.000",
      capacity: "60.9kWh",
      power: "155kW",
      torque: "288Nm",
      wheels: `19"`,
      seats: "Leather",
      display: `14.8"`,
    },
    {
      title: "JAECOO J8 SHS-P ARDIS",
      image: "/j8-awd-nobg.png",
      price: "Rp 812.000.000",
      oldPrice: "Rp 828.000.000",
      capacity: "34,46kWh",
      torque: "650Nm",
      wheels: `19"`,
      seats: "Leather",
      display: `14.8"`,
    },
  ];
  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"
        >
          <h2 className="text-4xl font-bold mb-1">
            Harga Terbaik Di Dealer Resmi Kami
          </h2>
          <p className="text-lg">
            Dapatkan penawaran terbaik di dealer resmi kami untuk pengalaman
            berkendara yang tak terlupakan!
          </p>
          <div className="relative w-full max-w-[1400px] mx-auto h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden">
            <Image
              src="/product1.jpg"
              alt="about-header"
              fill
              className="object-cover"
              sizes="(max-width: 768px) 100vw, 640px"
              priority
            />
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 w-full max-w-[1400px] mt-10">
            {cars.map((car, idx) => (
              <div
                key={idx}
                className="relative rounded-2xl border p-6 pt-10 flex flex-col items-center shadow-sm"
              >
                <span className="absolute top-4 left-4 bg-[#1F6779] text-white text-sm px-3 py-1 rounded-md z-10">
                  NEW OFFER
                </span>

                <h3 className="text-3xl font-bold text-center mt-5">
                  {car.title}
                </h3>
                <div className="relative w-full h-48 my-4">
                  <Image
                    src={car.image}
                    alt={car.title}
                    fill
                    className="object-contain"
                  />
                </div>
                <div className="flex  items-center justify-center border rounded-lg p-3 w-full text-center mb-2 gap-3">
                  <p className="text-xs text-[#1F6779]">START FROM</p>
                  <p className="text-2xl font-bold text-[#1F6779]">
                    {car.price}
                  </p>
                  <div className="text-[#1F6779]">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="13"
                      height="13"
                      viewBox="0 0 32 32"
                    >
                      <path
                        fill="currentColor"
                        d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m0 26a12 12 0 1 1 12-12a12 12 0 0 1-12 12"
                      />
                      <path
                        fill="currentColor"
                        d="M15 8h2v11h-2zm1 14a1.5 1.5 0 1 0 1.5 1.5A1.5 1.5 0 0 0 16 22"
                      />
                    </svg>
                  </div>
                </div>
                {/* <p className="text-[15px] text-black text-start mb-4">
                  *Save Rp 5.000.000 on the previous driveway price of{" "}
                  {car.oldPrice}. Offer ends 31st August 2025.
                </p> */}
                <div className="grid grid-cols-2 gap-2 w-full text-lg text-center mb-4">
                  <div className="bg-[#EAF7FF] p-5 rounded-md flex items-center gap-2">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="36"
                      height="36"
                      viewBox="0 0 36 36"
                    >
                      <path
                        fill="currentColor"
                        d="M22 4V2.62a.6.6 0 0 0-.58-.62h-6.84a.6.6 0 0 0-.58.62V4h-4a1.09 1.09 0 0 0-1 1.07v28a1 1 0 0 0 1 .93h16a1 1 0 0 0 1-.94v-28A1.09 1.09 0 0 0 26 4Zm-1.74 21.44a1.2 1.2 0 0 1-2.15 1.07l-5.46-10.95l6 1l-2.29-4a1.2 1.2 0 1 1 2.08-1.2l4.83 8.37l-6.37-1.03Z"
                        className="clr-i-solid clr-i-solid-path-1"
                      />
                      <path fill="none" d="M0 0h36v36H0z" />
                    </svg>
                    <div className="flex flex-col items-center">
                      <span className="font-bold">{car.capacity}</span>{" "}
                      <span className="text-sm">Battery Capacity</span>
                    </div>
                  </div>
                  <div className="bg-[#EAF7FF] p-5 rounded-md flex items-center gap-2">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                    >
                      <path
                        fill="currentColor"
                        // fill-rule="evenodd"
                        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10m5.954-9.25h-3.049a3 3 0 0 1-.803 1.39l1.524 2.64a6 6 0 0 0 2.328-4.03m-3.626 4.782l-1.525-2.64a3 3 0 0 1-1.606 0l-1.525 2.64A6 6 0 0 0 12 18c.825 0 1.612-.167 2.328-.468m-5.954-.751l1.524-2.64a3 3 0 0 1-.804-1.391H6.046a6 6 0 0 0 2.328 4.03m9.58-5.531h-3.049a3 3 0 0 0-.803-1.39l1.524-2.64a6 6 0 0 1 2.328 4.03m-3.626-4.782A6 6 0 0 0 12 6c-.825 0-1.612.167-2.328.468l1.525 2.64a3 3 0 0 1 1.606 0zM9.898 9.86L8.374 7.22a6 6 0 0 0-2.328 4.03h3.049c.138-.535.42-1.013.803-1.39"
                        // clip-rule="evenodd"
                      />
                    </svg>
                    <div className="flex flex-col items-center justify-center text-center">
                      <span className="font-bold">{car.power}</span>{" "}
                      <span className="text-sm">Max Power</span>
                    </div>
                  </div>
                  <div className="bg-[#EAF7FF] p-5 rounded-md flex items-center gap-2">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 48 48"
                    >
                      <path
                        // fill="none"
                        // stroke="currentColor"
                        // stroke-linecap="round"
                        // stroke-linejoin="round"
                        d="M28.413 30.857v-7.529h1.694a3.294 3.294 0 0 1 3.293 3.294v.941a3.294 3.294 0 0 1-3.293 3.294ZM14.6 28.363a2.494 2.494 0 0 0 4.987 0v-2.54a2.494 2.494 0 0 0-4.987 0Zm10.096-1.27a1.882 1.882 0 0 1 0 3.764h-3.105v-7.529h3.105a1.882 1.882 0 0 1 0 3.764m0 .001h-3.105m-3.448-12.39a1.7 1.7 0 0 1 0-3.39h12a1.7 1.7 0 1 1 0 3.39Zm-10.25 16.87a1.7 1.7 0 0 1-3.39 0h0v-10.17a1.7 1.7 0 1 1 3.39 0Zm0-5.09h2.109m14.14-9.021v-2.759"
                        stroke-width="1"
                      />
                      <path
                        // fill="none"
                        // stroke="currentColor"
                        // stroke-linecap="round"
                        // stroke-linejoin="round"
                        d="M36.773 25.063h2.3v-3.26h2.11l2.32 7.2l-2.33 7.2h-2.1v-3.14h-2.3l.02 2.05a1.58 1.58 0 0 1-1.58 1.58h-13.56a1.17 1.17 0 0 1-.66-.2l-4.99-3.47h-4.21a1.79 1.79 0 0 1-1.79-1.79v-.041h0v-9.4a1.8 1.8 0 0 1 1.79-1.77h1.4l2.66-2.26a1.13 1.13 0 0 1 .73-.27h15.26a1.59 1.59 0 0 1 1.58 1.53v2.15h1.79a1.59 1.59 0 0 1 1.58 1.59h0Z"
                        stroke-width="1"
                      />
                    </svg>
                    <div className="flex flex-col items-center justify-center text-center ml-5">
                      <span className="font-bold">{car.torque}</span>{" "}
                      <span className="text-sm"> Torque</span>
                    </div>
                  </div>
                  <div className="bg-[#EAF7FF] p-5 rounded-md flex items-center gap-2">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 36 36"
                    >
                      <path
                        fill="currentColor"
                        d="M32.5 3h-29A1.5 1.5 0 0 0 2 4.5v21A1.5 1.5 0 0 0 3.5 27h29a1.5 1.5 0 0 0 1.5-1.5v-21A1.5 1.5 0 0 0 32.5 3M32 25H4V5h28Z"
                        className="clr-i-outline clr-i-outline-path-1"
                      />
                      <path
                        fill="currentColor"
                        d="M7.7 8.76h20.43l1.81-1.6H6.1V23h1.6z"
                        className="clr-i-outline clr-i-outline-path-2"
                      />
                      <path
                        fill="currentColor"
                        d="M26 32h-1.74a3.6 3.6 0 0 1-1.5-2.52v-1.35h-1.52v1.37a4.2 4.2 0 0 0 .93 2.5h-8.34a4.2 4.2 0 0 0 .93-2.52v-1.35h-1.52v1.37a3.6 3.6 0 0 1-1.5 2.5h-1.8a1 1 0 1 0 0 2h16.12a.92.92 0 0 0 1-1A1 1 0 0 0 26 32"
                        className="clr-i-outline clr-i-outline-path-3"
                      />
                      <path fill="none" d="M0 0h36v36H0z" />
                    </svg>
                    <div className="flex flex-col items-center justify-center text-center ml-5">
                      <span className="font-bold">{car.display}</span>{" "}
                      <span className="text-sm"> Display</span>
                    </div>
                  </div>
                </div>
                <div className="flex gap-2 w-full ">
                  <Link href={"/product"} className="w-full">
                    <Button
                      className=" w-full border-[#1F6779] text-lg p-6"
                      variant="outline"
                    >
                      View Specs
                    </Button>
                  </Link>
                  <Dialog open={open} onOpenChange={setOpen}>
                    <DialogTrigger asChild>
                      <Button className="bg-[#1F6779] text-white h-[30px] md:w-[200px] md:h-[50px] p-6  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-4xl text-center mb-4 font-bold">
                          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>
                </div>
              </div>
            ))}
          </div>
        </motion.div>
      </section>
    </>
  );
}