import Image from "next/image";

export default function NearestLocation() {
  return (
    <section className="max-w-[1400px] mx-auto bg-white py-16 px-4 sm:px-6 lg:px-10">
      <h2 className="text-2xl sm:text-3xl font-bold text-center mb-6">
        Lokasi Servis Terdekat
      </h2>

      <div className="w-full mb-10">
        <Image
          src="/map-service.png"
          alt="Lokasi Servis Terdekat"
          width={1200}
          height={600}
          className="w-full  object-cover rounded"
        />
      </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="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 className="text-start px-4 border-l border-r border-gray-300">
          <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 className="text-start px-4 border-r border-gray-300">
          <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>
    </section>
  );
}