"use client";

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

const teamMembers = [
  {
    name: "Arlene McCoy",
    role: "Service Advisor",
    image: "/arlene.png",
  },
  {
    name: "Jacob Jones",
    role: "Foreman / Kepala Mekanik",
    image: "/jacob.png",
  },
  {
    name: "Cameron Williamson",
    role: "Technician",
    image: "/cameron.png",
  },
  {
    name: "Devon Lane",
    role: "QC",
    image: "/devon.png",
  },
  {
    name: "Esther Howard",
    role: "Service Manager",
    image: "/howard.png",
  },
  {
    name: "LIA KURNIA PUTRI",
    role: "CRO",
    image: "/lia.png",
  },
];

const topMembers = teamMembers.slice(0, 5);
const bottomMember = teamMembers[5];

export default function HeaderProgramSales() {
  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"
        >
          <h2 className="text-4xl font-bold mb-1">Program Services</h2>

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

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

          <div className="w-full max-w-[1200px] mt-12">
            <h2 className="text-3xl font-bold text-center mb-8">Our Teams</h2>

            <div className="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6 justify-center">
              {topMembers.map((member, index) => (
                <div
                  key={index}
                  className="bg-white rounded-lg shadow-sm p-6 text-center hover:shadow-md transition-shadow duration-300 h-[300px]"
                >
                  <div className=" w-40 h-40 mx-auto rounded-full overflow-hidden mb-8">
                    <Image
                      src={member.image}
                      alt={member.name}
                      width={96}
                      height={96}
                      className="object-cover w-full h-full"
                    />
                  </div>
                  <h3 className="font-semibold text-md mb-3">{member.name}</h3>
                  <p className="text-gray-500 text-sm">{member.role}</p>
                </div>
              ))}
            </div>

            <div className="md:flex w-full md:justify-center mt-8">
              <div className="bg-white rounded-lg shadow-sm p-6 text-center hover:shadow-md transition-shadow duration-300 h-[300px]">
                <div className="w-40 h-40  rounded-full overflow-hidden mb-8 mx-auto md:mx-2">
                  <Image
                    src={bottomMember.image}
                    alt={bottomMember.name}
                    width={96}
                    height={96}
                    className="object-cover w-full h-full"
                  />
                </div>
                <h3 className="font-semibold text-md mb-3">
                  {bottomMember.name}
                </h3>
                <p className="text-gray-500 text-sm">{bottomMember.role}</p>
              </div>
            </div>
          </div>
        </motion.div>
      </section>
    </>
  );
}