"use client";

import Image from "next/image";
import { motion } from "framer-motion";

export default function HeaderAfterSales() {
  const services = [
    {
      image: "/after-sales.png",
      title: "GARANSI KENDARAAN",
      description:
        "Jaecoo Indonesia berkomitmen seluruh pelanggan setia Jaecoo Indonesia dengan memberikan garansi kendaraan selama 6 tahun apabila terdapat cacat material atau kesalahan dari hasil kerja pabrik.",
    },
    {
      image: "/after-sales.png",
      title: "GARANSI MESIN",
      description:
        "Jaecoo Indonesia memberikan garansi mesin selama 10 tahun apabila terdapat cacat material atau kesalahan dari hasil kerja pabrik.",
    },
    {
      image: "/after-sales.png",
      title: "FREE BIAYA PERAWATAN",
      description:
        "Jaecoo Indonesia memberikan gratis biaya perawatan atau service di Dealer Resmi Jaecoo selama 4 tahun kepada seluruh pelanggan Jaecoo Indonesia.",
    },
    {
      image: "/after-sales2.png",
      title: "SPAREPART",
      description:
        "Jaecoo Indonesia menyediakan sparepart berkualitas terbaik dan orisinil dari pabrik Jaecoo Indonesia.",
    },
  ];

  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"
        >
          <div className="relative w-full max-w-[1400px] mx-auto h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden">
            <Image
              src="/header-as.png"
              alt="about-header"
              fill
              className="object-cover"
              sizes="(max-width: 768px) 100vw, 640px"
              priority
            />
          </div>

          <div className="w-full max-w-[1400px] mx-auto mt-12">
            <h2 className="text-3xl font-bold text-black mb-8">
              After Sales Services
            </h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {services.map((item, index) => (
                <div key={index} className="flex flex-col gap-4">
                  <div className="relative w-full h-80">
                    <Image
                      src={item.image}
                      alt={item.title}
                      fill
                      className="object-cover "
                    />
                  </div>
                  <h3 className="text-lg font-semibold text-[#1F6779]">
                    {item.title}
                  </h3>
                  <p className="text-[#1F6779] text-[18px]">
                    {item.description}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </motion.div>
      </section>
    </>
  );
}