"use client";

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

const agents = [
  {
    name: "Johny Nugroho",
    title: "Branch Manager Jaecoo Cihampelas Bandung",
    image: "/johny.png",
  },
  {
    name: "Basuki Pamungkas",
    title: "Spv Jaecoo Cihampelas Bandung",
    image: "/basuki.png",
  },
  {
    name: "Deni Tihayar",
    title: "Spv Jaecoo Cihampelas Bandung",
    image: "/deni.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"
      >
        Our Teams
      </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 gap-6 place-items-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-2 py-4 gap-4 flex flex-col items-center h-[300px] w-[224px]"
          >
            <div className="relative w-28 h-36 mb-3">
              <Image
                src={agent.image}
                alt={agent.name}
                fill
                className="rounded-full object-cover"
              />
            </div>
            <h3 className="text-lg text-gray-900 text-center">{agent.name}</h3>
            <p className="text-xs text-gray-600 text-center mt-1">
              {agent.title}
            </p>
          </motion.div>
        ))}
      </div>
    </section>
  );
}
