import Link from "next/link";

export default function MeetTeam() {
  const team = [
    {
      id: 1,
      image: "/2.jpg",
      name: "Larysa Caba",
    },
  ];

  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 <span className="text-rise-teal italic">Larysa Caba</span>
          </h2>
          <p className="text-lg text-gray-600 font-work leading-relaxed">
            A Seasoned Asset and Investment Manager and also an NFT Enthusiast
          </p>
          <br />
          <Link
            href="https://larysacabaservices.com/"
            target="_blank"
            className="bg-rise-teal text-white px-8 py-4 rounded-lg hover:bg-foreground transition-colors font-work text-base font-medium text-center"
          >
            Read More
          </Link>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-1 gap-8 max-w-4xl mx-auto">
          {team.map((member, index) => (
            <div key={member.id} className="group cursor-pointer">
              <div className="relative overflow-hidden rounded-xl aspect-square">
                <img
                  src={member.image}
                  alt={member.name}
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
