import { Button } from "@/components/ui/button";

export const TeamSection = () => {
  return (
    <section id="team" className="py-20 bg-white relative overflow-hidden">
      <div className="container mx-auto px-6 relative">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold mb-4 text-gray-800 ">
            Meet Our Team
          </h2>
          <div className="h-1 w-24 bg-gradient-to-r from-purple-500 to-pink-400 rounded-full mx-auto mb-6"></div>
          <p className="text-gray-600 max-w-3xl mx-auto">
            Our diverse team of licensed therapists and wellness professionals
            bring decades of combined experience and specialized training to
            support your unique needs.
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
          {[
            {
              name: "Dr. Emily Chen",
              role: "Founder & Clinical Director",
              image:
                "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2",
              description:
                "With over 15 years of experience in clinical psychology, Dr. Chen specializes in trauma-informed therapy and mindfulness-based approaches.",
            },
            {
              name: "Dr. Marcus Johnson",
              role: "Lead Therapist",
              image:
                "https://images.unsplash.com/photo-1560250097-0b93528c311a",
              description:
                "Specializing in cognitive behavioral therapy and anxiety disorders, Dr. Johnson has helped hundreds of clients develop effective coping strategies.",
            },
            {
              name: "Sarah Williams",
              role: "Art Therapist",
              image:
                "https://images.unsplash.com/photo-1580489944761-15a19d654956",
              description:
                "Sarah combines traditional therapeutic approaches with creative expression to help clients process emotions and experiences.",
            },
            {
              name: "James Rivera",
              role: "Mindfulness Coach",
              image:
                "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
              description:
                "A certified meditation instructor and former stress management consultant, James helps clients build sustainable mindfulness practices.",
            },
          ].map((member, index) => (
            <div
              key={index}
              className="bg-white rounded-xl shadow-lg border-0 overflow-hidden transition-all duration-300 hover:shadow-xl group"
            >
              <div className="h-2 bg-gradient-to-r from-purple-500 to-pink-400 w-full"></div>
              <div className="p-6">
                <div className="w-32 h-32 rounded-full mx-auto mb-6 overflow-hidden">
                  <img
                    src={member.image}
                    alt={member.name}
                    className="w-full h-full object-cover rounded-lg mb-6"
                  />
                </div>
                <h3 className="text-xl font-bold text-gray-800 mb-1 text-center ">
                  {member.name}
                </h3>
                <p className="text-purple-600 mb-4 text-center font-medium ">
                  {member.role}
                </p>
                <p className="text-gray-600 text-center">
                  {member.description}
                </p>
                <div className="mt-4 flex justify-center space-x-3">
                  <button className="w-8 h-8 rounded-full bg-gray-100 hover:bg-purple-100 flex items-center justify-center transition-colors duration-300">
                    <i className="fab fa-linkedin-in text-gray-600 hover:text-purple-700"></i>
                  </button>
                  <button className="w-8 h-8 rounded-full bg-gray-100 hover:bg-purple-100 flex items-center justify-center transition-colors duration-300">
                    <i className="far fa-envelope text-gray-600 hover:text-purple-700"></i>
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="flex justify-center mt-12">
          <Button className="mt-4 bg-gradient-to-r from-purple-500 to-pink-400 hover:opacity-90 transition-all duration-300 !rounded-button">
            View All Team Members
          </Button>
        </div>
      </div>
    </section>
  );
};