"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 AWD",
      image: "/j7-awd-nobg.png",
      price: "Rp 549.000.000",
      oldPrice: "Rp 544.000.000",
      capacity: "18.3kWh",
      wheels: `19"`,
      seats: "Leather",
      display: `14.8"`,
    },
    {
      title: "JAECOO J7 SHS",
      image: "/j7-shs-nobg.png",
      price: "Rp 599.000.000",
      oldPrice: "Rp 594.000.000",
      capacity: "18.3kWh",
      wheels: `19"`,
      seats: "Leather",
      display: `14.8"`,
    },
    {
      title: "JAECOO J8 AWD",
      image: "/j8-awd-nobg.png",
      price: "Rp 812.000.000",
      oldPrice: "Rp 807.000.000",
      capacity: "18.3kWh",
      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="/price-header.png"
              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.wheels}</span>{" "}
                      <span className="text-sm">Alloy Wheels</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 512 512"
                    >
                      <path
                        fill="currentColor"
                        d="m71.47 18.38l-.01.01c-6.58-.1-14.25.79-21.52 2.41c-8.31 1.84-16.18 4.69-21.3 7.56c-2.57 1.44-4.42 2.9-5.24 3.8l25.86 90.54c7.22-9.1 15.41-16.6 23.75-22.2c9.69-6.44 19.19-10.67 27.89-12.47c0-13.14-.3-25.92-1.8-36.76c-1.9-13.05-5.6-23.03-11.5-28.91c-1.3-1.35-6.28-3.44-13.39-3.88c-.89 0-1.81-.1-2.74-.1m29.03 92.12c-6.7.4-14.2 3.5-21.1 8.7c-13.68 10.3-24.04 28.7-24.34 40.2l45.74 240.3c7.6-9.5 19.2-15.7 32.2-15.7c11.5 0 22 4.9 29.5 12.7c5.1-1.1 10.5-2.2 16.4-3.3c1.5-.3 3.1-.5 4.7-.8c-13.5-92.5-35.3-199.6-65.2-275.3c-5.2-4.8-10.3-6.7-15.6-6.8zm283 39.5l-53.6 167.4l17.2 5.4l24-75.1l117.1 37.5l5.4-17.2l-117-37.4l24.1-75.2zm-38.7 245.3c-21.5.1-46.3 1.4-71 3.7c-33 2.9-66 7.4-91.6 12.1c-3.5.6-6.8 1.3-10 1.9q1.8 5.7 1.8 12c0 22.5-18.5 41-41 41c-5.6 0-11-1.2-15.9-3.2c-3.1 8.9-5.4 17.6-6.7 24.2H398c5 0 7.7-1.8 10.7-6.4c3.1-4.7 5.4-12.4 6.3-21.5c1.9-18.1-2.1-41.2-9.1-55.1c.3.5-2.8-2.5-10.2-4.4s-18.1-3.3-30.7-3.9c-6.3-.3-13.1-.4-20.2-.4M133 402c-12.8 0-23 10.2-23 23s10.2 23 23 23s23-10.2 23-23s-10.2-23-23-23"
                      />
                    </svg>
                    <div className="flex flex-col items-center justify-center text-center ml-5">
                      <span className="font-bold">{car.seats}</span>{" "}
                      <span className="text-sm"> Seats</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>
    </>
  );
}