"use client";
import Image from "next/image";
import { easeOut, motion } from "framer-motion";

const services = [
  { image: "/s1.png", title: "ELECTRONIC VEHICLE HEALTH CHECK" },
  { image: "/s2.png", title: "REQUEST A SERVICE" },
  { image: "/s3.png", title: "SERVICE PLANS" },
  { image: "/s4.png", title: "BODY AND PAINT" },
  { image: "/s5.png", title: "GENUINE PARTS" },
  { image: "/s6.png", title: "JAECOO REPAIRS" },
];

const containerVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.15,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 50 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.6, ease: easeOut },
  },
};

export default function Service() {
  return (
    <section className="py-16 px-4 sm:px-6 lg:px-10 bg-white">
      <div className="w-full mx-auto text-start">
        <motion.h2
          className="text-2xl sm:text-3xl font-bold mb-2"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, ease: "easeOut" }}
          viewport={{ once: true }}
        >
          Performa Hebat, Layanan Terjamin
        </motion.h2>

        <motion.p
          className="text-gray-700 mb-10 w-full md:w-6/12"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, ease: "easeOut", delay: 0.1 }}
          viewport={{ once: true }}
        >
          Servis resmi Jaecoo untuk kendaraan Anda dikerjakan oleh teknisi
          tersertifikasi dengan suku cadang asli dan sistem booking online.
        </motion.p>

        <motion.div
          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 justify-items-center"
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, amount: 0.2 }}
        >
          {services.map((service, index) => (
            <motion.div key={index} variants={itemVariants} className="w-full">
              <Image
                src={service.image}
                alt={service.title}
                width={413}
                height={170}
                className="w-full object-contain"
              />
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}