export default function TeamSection() {
    const team = [
      {
        name: "Larysa Caba",
        role: "Founder",
        image: "/2.jpg"
      },
      {
        name: "Brittany Anderson",
        role: "Chief operating officer (C.O.O)",
        image: "/brittany.jpg"
      },
      {
        name: "Jennifer Onson",
        role: "Head, strategy and communications",
        image: "/jennifer.jpg"
      },

    ];
  
    return (
      <section className="bg-white py-16">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-2xl md:text-3xl font-tomato font-bold text-rise-dark">
              Meet the <span className="text-rise-teal italic">Experts</span>
            </h2>
          </div>
  
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
            {team.map((member) => (
              <div key={member.name} className="text-center space-y-4">
                <div className="relative overflow-hidden rounded-xl aspect-square bg-teal-100">
                  <img
                    src={member.image}
                    alt={member.name}
                    className="w-full h-full object-cover"
                  />
                </div>
                <div className="space-y-1">
                  <h3 className="text-lg font-tomato font-bold text-rise-dark">
                    {member.name}
                  </h3>
                  <p className="text-gray-600 font-work text-sm">
                    {member.role}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }
  