"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 BestAgent() {
  return (
    <section className="py-16 px-4 sm: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-2xl sm:text-3xl md:text-4xl font-semibold text-gray-900 mb-10"
      >
        Our Teams
      </motion.h2>

      <div className="flex flex-col md:flex-row flex-wrap items-center justify-center gap-6">
        {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 p-4 flex flex-col items-center w-full max-w-[224px] h-[340px] sm:h-[300px]"
          >
            <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>
  );
}