Team 3

import Image from "next/image";
import { Badge } from "@/components/ui/badge";

const teamMembers = [
  {
    img: "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a1.jpg",
    name: "Clara Reyes",
    role: "CEO & Co-Founder",
  },
  {
    img: "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a2.jpg",

    name: "Liam Chen",
    role: "CTO",
  },
  {
    img: "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a3.jpg",

    name: "Priya Sharma",
    role: "VP of Operations",
  },
  {
    img: "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a4.jpg",

    name: "David Okafor",
    role: "Head of Engineering",
  },
  {
    img: "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a5.jpg",

    name: "Elena Volkov",
    role: "Director of Sustainability",
  },
  {
    img: "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a6.jpg",

    name: "Marcus Webb",
    role: "Head of Partnerships",
  },
];

export default function TeamSection() {
  return (
    <section className="relative w-full overflow-hidden py-16 text-black dark:bg-white">
      <div className="mx-auto max-w-full px-5 md:px-10">
        <Badge className="mb-4 rounded-none bg-[#e1fcad] px-3 py-0.5 font-medium text-black text-sm dark:bg-[#e1fcad]">
          Our Team
        </Badge>
        <p className="max-w-5xl font-kanturmuy font-medium text-3xl tracking-tight md:text-4xl">
          Meet the visionary leaders who are shaping Aero's future and driving
          our mission to deliver innovative clean energy solutions.
        </p>
        <div className="mt-14 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3">
          {teamMembers.map((member) => (
            <div
              className="group cursor-pointer overflow-hidden"
              key={member.name}
            >
              <div className="h-80 overflow-hidden md:h-120">
                <Image
                  alt={member.name}
                  className="h-full w-full object-cover transition-all duration-700 ease-in-out group-hover:scale-105"
                  height={600}
                  src={member.img}
                  width={500}
                />
              </div>
              <div className="py-5">
                <h3 className="font-medium text-2xl tracking-tight">
                  {member.name}
                </h3>
                <p className="font-mono text-neutral-600">{member.role}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}