import React from "react";

const TeamSection = () => {
  const teamMembers = [
    {
      name: "Alice Johansson",
      position: "CEO",
      imageUrl: "https://source.unsplash.com/random/300x300?sig=1",
    },
    {
      name: "David Smith",
      position: "CTO",
      imageUrl: "https://source.unsplash.com/random/300x300?sig=2",
    },
    {
      name: "Emma Jones",
      position: "Lead Designer",
      imageUrl: "https://source.unsplash.com/random/300x300?sig=3",
    },
    {
      name: "Michael Brown",
      position: "Head of Sales",
      imageUrl: "https://source.unsplash.com/random/300x300?sig=4",
    },
  ];

  return (
    <section className="py-24 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 className="
          text-center text-3xl font-semibold text-gray-800
          mb-16
          font-sans
        ">
          Our Team
        </h1>
        <div className="flex flex-wrap -mx-4 justify-center">
          {teamMembers.map((member, index) => (
            <div key={index} className="
              px-4 w-full sm:w-1/2 md:w-1/3 lg:w-1/4 mb-10
            ">
              <div className="
                flex flex-col items-center overflow-hidden
                bg-[#ffffff] rounded-lg shadow-lg
                p-6 border border-[#f0eee3]
              ">
                <img 
                  className="
                    mb-6 w-24 h-24 rounded-full object-cover 
                    border-2 border-white
                  " 
                  src={member.imageUrl} 
                  alt={member.name}
                />
                <h2 className="
                  text-xl font-semibold text-gray-800 mb-1 
                  font-sans
                ">
                  {member.name}
                </h2>
                <p className="
                  text-sm text-gray-600 mb-3
                  font-sans
                ">
                  {member.position}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default TeamSection;