"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 8 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>
    </section>
  );
}