"use client";

import Image from "next/image";

export default function FeaturesAndSpecifications() {
  return (
    <section className="pt-10 px-4 sm:px-6 md:px-20 bg-white">
      <h2 className="text-2xl mt-5 mb-8">
        <span className="text-[#1F6779] font-semibold">Jaecoo 7 AWD</span> Fitur
      </h2>

      <div className="relative w-full h-[300px] sm:h-[400px] md:h-[600px]">
        <Image
          src="/fitur1.png"
          alt="Aluminium Chassis"
          fill
          className="object-cover"
          sizes="100vw"
        />
        <div className="absolute bottom-26 left-3 sm:left-10 md:left-26 max-w-xs bg-white/60 rounded-lg p-4">
          <h2 className="text-xl sm:text-sm font-semibold text-black">
            Lane Changing Assistance
          </h2>
          <p className="text-xs sm:text-xs mt-2 text-black">
            Advanced safety feature that monitors surrounding traffic and
            provides alerts or steering support to help ensure sasfe and
            confident lane changes
          </p>
        </div>
      </div>
      <div className="relative w-full h-[300px] sm:h-[400px] md:h-[600px] my-20">
        <Image
          src="/fitur2.png"
          alt="Aluminium Chassis"
          fill
          className="object-cover"
          sizes="100vw"
        />
      </div>
      <h2 className="text-2xl mt-5 mb-8">
        <span className="text-[#1F6779] font-semibold">Jaecoo 7 AWD</span>{" "}
        Spesifikasi
      </h2>
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-32 gap-y-6 text-sm sm:text-base text-start my-10">
        <div>
          <p className="text-gray-500">Max Power</p>
          <p className="font-bold">136,5kw/183hp</p>
        </div>
        <div>
          <p className="text-gray-500">Power Train</p>
          <p className="font-bold">1.6T+7DHT</p>
        </div>
        <div>
          <p className="text-gray-500">Torque</p>
          <p className="font-bold">275N.m</p>
        </div>
        <div>
          <p className="text-gray-500">Sensor</p>
          <p className="font-bold">8 Sensor</p>
        </div>
        <div>
          <p className="text-gray-500">Max Speed</p>
          <p className="font-bold">180km/h</p>
        </div>
        <div>
          <p className="text-gray-500">0-100km-h</p>
          <p className="font-bold">9,2s</p>
        </div>
        <div>
          <p className="text-gray-500">Airbag</p>
          <p className="font-bold">8 airbags</p>
        </div>
        <div>
          <p className="text-gray-500">ADAS</p>
          <p className="font-bold">19 adas</p>
        </div>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-6   pt-10  ">
        <div className="text-start px-4 border-l border-gray-300">
          <div className="mb-14 ml-3">
            <div className="text-4xl mb-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="30"
                height="30"
                viewBox="0 0 24 24"
              >
                <g fill="none">
                  <path
                    stroke="currentColor"
                    // stroke-linejoin="round"
                    // stroke-width="2"
                    d="M12 13v7.098c0 .399 0 .598-.129.67c-.129.071-.298-.035-.636-.246L4.94 16.588c-.46-.288-.69-.431-.815-.658C4 15.705 4 15.434 4 14.893V8m8 5L4 8m8 5l5.286-3.304c1.218-.761 1.827-1.142 1.827-1.696s-.609-.935-1.827-1.696L13.06 3.663c-.516-.323-.773-.484-1.06-.484s-.544.161-1.06.484L4 8"
                  />
                  <path
                    fill="currentColor"
                    d="M19 12a1 1 0 1 0 2 0zm.875-3.93L19 8.553zM19 9.107V12h2V9.108zm.59-2.544l-3.06-1.912l-1.06 1.696l3.06 1.913zM21 9.109c0-.252.001-.51-.02-.733a2 2 0 0 0-.23-.79l-1.75.97c-.027-.05-.02-.073-.011.01c.01.106.011.254.011.543zm-2.47-.848c.246.154.37.233.454.298c.067.05.043.045.016-.004l1.75-.97a2 2 0 0 0-.549-.614c-.177-.136-.397-.272-.611-.405z"
                  />
                  <circle
                    cx="17.5"
                    cy="16.5"
                    r="2.5"
                    stroke="currentColor"
                    // stroke-width="2"
                  />
                  <path
                    stroke="currentColor"
                    // stroke-linecap="round"
                    // stroke-width="2"
                    d="m21 20l-1.5-1.5"
                  />
                  <path
                    fill="currentColor"
                    d="M14.53 20.598a1 1 0 0 0-1.06-1.696zM11 20.375l-.53.848zm.937.444l-.063.998zm.126 0L12 19.82zm-.533-1.292l-3-1.875l-1.06 1.696l3 1.875zm1.94-.625l-.5.313l1.06 1.695l.5-.312zm-.5.313l-.5.312l1.06 1.696l.5-.312zm-2.5 2.008c.213.133.429.27.625.368c.214.108.47.206.779.226L12 19.82c.056.003.072.022-.005-.016a7 7 0 0 1-.465-.278zm2-1.696a7 7 0 0 1-.465.278c-.077.038-.061.02-.005.016l.126 1.996c.31-.02.565-.118.779-.226c.196-.099.412-.235.625-.368zm-.596 2.29q.126.008.252 0L12 19.82z"
                  />
                </g>
              </svg>
            </div>
            <p className="font-semibold mb-1"> {">"}TERSEDIA DALAM STOK</p>
            <p className="text-gray-600 text-sm">
              Jelajahi pilihan hebat kami dari mobil Jaecoo
            </p>
          </div>
        </div>

        <div className="text-start px-4 border-l border-r border-gray-300">
          <div className="mb-14 ml-3">
            <div className="text-2xl mb-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="30"
                height="30"
                viewBox="0 0 24 24"
              >
                <path
                  fill="currentColor"
                  d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8-7L4 8v10h16V8zm0-2l8-5H4zM4 8V6v12z"
                />
              </svg>
            </div>
            <p className="font-semibold mb-1">{">"}BERITAHU SAYA</p>
            <p className="text-gray-600 text-sm">
              Daftar untuk semua berita terbaru dari Jaecoo
            </p>
          </div>
        </div>

        <div className="text-start px-4 border-r border-gray-300">
          <div className="mb-14">
            <div className="text-2xl mb-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="30"
                height="30"
                viewBox="0 0 512 512"
              >
                <path
                  fill="currentColor"
                  //   fill-rule="evenodd"
                  d="M256 42.667c117.821 0 213.334 95.513 213.334 213.333c0 117.821-95.513 213.334-213.334 213.334c-117.82 0-213.333-95.513-213.333-213.334C42.667 138.18 138.18 42.667 256 42.667M85.334 256c0 87.032 65.145 158.848 149.332 169.346V316.358c-21.87-7.73-38.283-27.01-41.913-50.51L85.636 245.762q-.301 5.081-.302 10.238m341.031-10.238l-107.118 20.086c-3.629 23.5-20.043 42.78-41.913 50.51v108.988C361.523 414.848 426.668 343.032 426.668 256q-.001-5.156-.302-10.238M256 85.334c-76.056 0-140.493 49.75-162.541 118.484l107.16 20.085C211.699 204.827 232.352 192 256 192c23.65 0 44.302 12.827 55.382 31.903l107.16-20.085C396.493 135.084 332.057 85.334 256 85.334"
                />
              </svg>
            </div>
            <p className="font-semibold mb-1">{">"}PESAN TEST DRIVE</p>
            <p className="text-gray-600 text-sm">
              Atur test drive di jalan melalui Dealer terdekat kami
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}