"use client";

import Image from "next/image";

export default function FeaturesAndSpecificationsJ8() {
  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 8 SHS-P ARDIS
        </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="/awd-fitur8.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 8 SHS-P ARDIS
        </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">248ps</p>
        </div>
        <div>
          <p className="text-gray-500">AWD Technology</p>
          <p className="font-bold">ARDIS</p>
        </div>
        <div>
          <p className="text-gray-500">Suspension</p>
          <p className="font-bold">CDC Magnetic</p>
        </div>
        <div>
          <p className="text-gray-500">ADAS</p>
          <p className="font-bold">19 adas</p>
        </div>
        <div>
          <p className="text-gray-500">Engine</p>
          <p className="font-bold">2.0TGDI</p>
        </div>
        <div>
          <p className="text-gray-500">0-100km-h</p>
          <p className="font-bold">8.8s</p>
        </div>
        <div>
          <p className="text-gray-500">airbag</p>
          <p className="font-bold">10 airbags</p>
        </div>
        <div>
          <p className="text-gray-500">Torque</p>
          <p className="font-bold">385N.m</p>
        </div>
      </div>
    </section>
  );
}