"use client";

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

const agents = [
  {
    name: "Zamroni",
    title: "Spv Jaecoo Kelapa Gading",
    image: "/zamroni.png",
  },
  {
    name: "Murtiyono",
    title: "Spv Jaecoo Kelapa Gading",
    image: "/murtiyono.jpg",
  },
  {
    name: "Sutino",
    title: "Spv Jaecoo Kelapa Gading",
    image: "/sutino.png",
  },
  {
    name: "Amendra Ismail",
    title: "Spv Jaecoo Kelapa Gading",
    image: "/amendra.png",
  },
  {
    name: "Henny",
    title: "Branch Manager Jaecoo Kelapa Gading",
    image: "/henny.png",
  },
];

export default function Agent() {
  return (
    <section className="py-16 px-6 md:px-12 bg-[#f9f9f9] text-center mt-0">
      <motion.h2
        initial={{ opacity: 0, y: 30 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6 }}
        viewport={{ once: true }}
        className="text-3xl md:text-6xl font-semibold text-gray-900 mb-2"
      >
        Agen Unggulan Kami
      </motion.h2>

      <motion.p
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6, delay: 0.2 }}
        viewport={{ once: true }}
        className="text-gray-600 mb-10 text-lg"
      >
        Temui anggota tim kami yang luar biasa
      </motion.p>

      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6 justify-center">
        {agents.map((agent, index) => (
          <motion.div
            key={index}
            initial={{ opacity: 0, y: 40 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{
              duration: 0.6,
              delay: index * 0.2 + 0.3,
              ease: "easeOut",
            }}
            viewport={{ once: true, amount: 0.3 }}
            className="bg-white shadow-md px-4 py-10 flex flex-col items-center h-[317px]"
          >
            <div className="relative w-36 h-40 mb-14">
              <Image
                src={agent.image}
                alt={agent.name}
                fill
                className="rounded-full object-cover"
              />
            </div>
            <h3 className="text-2xl text-gray-900">{agent.name}</h3>
            <p className="text-xs text-gray-600 text-center mt-1">
              {agent.title}
            </p>
          </motion.div>
        ))}
      </div>
    </section>
  );
}