"use client";

import React, { useEffect, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Autoplay } from "swiper/modules";
import { motion } from "framer-motion";

// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import Image from "next/image";

interface TeamMember {
  name: string;
  position: string;
  socialLinks: {
    facebook?: string;
    instagram?: string;
    pinterest?: string;
    twitter?: string;
  };
}

const TeamSection = () => {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null;
  }
  const teamMembers: TeamMember[] = [
    {
      name: "MS. NILUFAR KHANAM CHOWDHURY",
      position: "Chairman",
      socialLinks: {
        facebook: "#",
        instagram: "#",
        pinterest: "#",
        twitter: "#",
      },
    },
    {
      name: "MR. SHAKER AHMED KHAN CHOWDHURY",
      position: "Managing Director",
      socialLinks: {
        facebook: "#",
        instagram: "#",
        pinterest: "#",
        twitter: "#",
      },
    },
    {
      name: "MR. SHEHREEK AHMED KHAN CHOWDHURY",
      position: "Director",
      socialLinks: {
        facebook: "#",
        instagram: "#",
        pinterest: "#",
        twitter: "#",
      },
    },
    {
      name: "MS. SUMAIYA NUSRAT SARA CHOWDHURY",
      position: "Director",
      socialLinks: {
        facebook: "#",
        instagram: "#",
        pinterest: "#",
        twitter: "#",
      },
    },
    {
      name: "MR. LEE PAK TANG",
      position: "Director",
      socialLinks: {
        facebook: "#",
        instagram: "#",
        pinterest: "#",
        twitter: "#",
      },
    },
  ];

  return (
    <>
      <style jsx global>{`
        .team-pagination-bullet {
          background-color: #0a74b2 !important;
        }
        .team-pagination-bullet-active {
          background-color: #0a74b2 !important;
        }
      `}</style>
      <section className="py-20 bg-gray-50 relative overflow-hidden">
        {/* Background Pattern */}
        <div className="absolute inset-0 opacity-5">
          <div className="absolute top-10 left-10 w-32 h-32 rounded-full border-2 border-pink-300"></div>
          <div className="absolute top-20 right-20 w-20 h-20 rounded-full bg-pink-200"></div>
          <div className="absolute bottom-10 left-20 w-24 h-24 rounded-full border border-pink-200"></div>
          <div className="absolute bottom-20 right-10 w-16 h-16 rounded-full bg-pink-100"></div>
        </div>

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
          {/* Header */}
          <motion.div
            className="text-center mb-16"
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            <div className="inline-flex items-center gap-2 px-6 py-3 bg-blue-100 text-[#0A74B2] rounded-full text-sm font-medium mb-6">
              {/* leaf icon */}
              <Image
                src="/screenshots/leaf.svg"
                alt="Leaf Icon"
                width={20}
                height={20}
              />
              Our Team
            </div>
            <h2 className="text-3xl md:text-3xl font-bold text-gray-900 mb-4">
              Our Management Team
            </h2>
          </motion.div>

          {/* Team Slider */}
          <div className="relative">
            <Swiper
              modules={[Navigation, Pagination, Autoplay]}
              spaceBetween={30}
              slidesPerView={1}
              navigation={{
                nextEl: ".team-button-next",
                prevEl: ".team-button-prev",
              }}
              pagination={{
                clickable: true,
                bulletClass: "swiper-pagination-bullet team-pagination-bullet",
                bulletActiveClass:
                  "swiper-pagination-bullet-active team-pagination-bullet-active",
              }}
              autoplay={{
                delay: 5000,
                disableOnInteraction: false,
              }}
              breakpoints={{
                640: {
                  slidesPerView: 2,
                },
                768: {
                  slidesPerView: 3,
                },
                1024: {
                  slidesPerView: 3,
                },
              }}
              className="pb-16"
            >
              {teamMembers.map((member, index) => (
                <SwiperSlide key={index}>
                  <motion.div
                    className="bg-white rounded-2xl p-4 shadow-lg hover:shadow-xl transition-all duration-300"
                    initial={{ opacity: 0, y: 50 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.6, delay: index * 0.1 }}
                    whileHover={{ y: -5 }}
                  >
                    {/* Profile Image Placeholder */}
                    <div className="w-12 h-12 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center">
                      <svg
                        className="w-8 h-8 text-gray-400"
                        fill="currentColor"
                        viewBox="0 0 20 20"
                      >
                        <path
                          fillRule="evenodd"
                          d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                          clipRule="evenodd"
                        />
                      </svg>
                    </div>

                    {/* Name and Position */}
                    <div className="text-center mb-2">
                      <h3 className="text-md font-medium text-gray-900 mb-2 leading-tight">
                        {member.name}
                      </h3>
                      <p className="text-gray-600 font-medium">
                        {member.position}
                      </p>
                    </div>

                    {/* Social Links */}
                    <div className="flex justify-center gap-3 mb-2">
                      {member.socialLinks.facebook && (
                        <a
                          href={member.socialLinks.facebook}
                          className="w-10 h-10 bg-gray-100 hover:bg-[#0A74B2] text-gray-600 hover:text-white rounded-full flex items-center justify-center transition-all duration-300"
                        >
                          <svg
                            className="w-4 h-4"
                            fill="currentColor"
                            viewBox="0 0 24 24"
                          >
                            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                          </svg>
                        </a>
                      )}
                      {member.socialLinks.instagram && (
                        <a
                          href={member.socialLinks.instagram}
                          className="w-10 h-10 bg-gray-100 hover:bg-[#0A74B2] text-gray-600 hover:text-white rounded-full flex items-center justify-center transition-all duration-300"
                        >
                          <svg
                            className="w-4 h-4"
                            fill="currentColor"
                            viewBox="0 0 24 24"
                          >
                            <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 6.618 5.367 11.986 11.988 11.986s11.987-5.368 11.987-11.986C24.004 5.367 18.635.001 12.017.001zM8.449 16.988c-1.297 0-2.448-.49-3.33-1.297C4.198 14.81 3.708 13.659 3.708 12.362s.49-2.448 1.297-3.33c.882-.881 2.033-1.371 3.33-1.371s2.448.49 3.33 1.297c.881.882 1.371 2.033 1.371 3.33s-.49 2.448-1.297 3.33c-.882.881-2.033 1.371-3.33 1.371z" />
                          </svg>
                        </a>
                      )}
                      {member.socialLinks.pinterest && (
                        <a
                          href={member.socialLinks.pinterest}
                          className="w-10 h-10 bg-gray-100 hover:bg-[#0A74B2] text-gray-600 hover:text-white rounded-full flex items-center justify-center transition-all duration-300"
                        >
                          <svg
                            className="w-4 h-4"
                            fill="currentColor"
                            viewBox="0 0 24 24"
                          >
                            <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.748.099.12.112.225.085.347-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.750-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24.009c6.624 0 11.99-5.367 11.99-11.986C24.007 5.367 18.641.001 12.017.001z" />
                          </svg>
                        </a>
                      )}
                      {member.socialLinks.twitter && (
                        <a
                          href={member.socialLinks.twitter}
                          className="w-10 h-10 bg-gray-100 hover:bg-[#0A74B2] text-gray-600 hover:text-white rounded-full flex items-center justify-center transition-all duration-300"
                        >
                          <svg
                            className="w-4 h-4"
                            fill="currentColor"
                            viewBox="0 0 24 24"
                          >
                            <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
                          </svg>
                        </a>
                      )}
                    </div>

                    {/* View More Details Button */}
                    {/* <button className="w-full flex items-center justify-center gap-2 text-gray-700 hover:text-[#0A74B2] font-medium transition-colors duration-300">
                      View More Details
                      <svg
                        className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M17 8l4 4m0 0l-4 4m4-4H3"
                        />
                      </svg>
                    </button> */}
                  </motion.div>
                </SwiperSlide>
              ))}
            </Swiper>

            {/* Custom Navigation Buttons */}
            <div className="flex justify-center gap-4 mt-8">
              <button className="team-button-prev w-12 h-12 bg-white border border-gray-300 hover:bg-[#0A74B2] hover:text-white hover:border-[#0A74B2] rounded-full flex items-center justify-center transition-all duration-300 shadow-lg">
                <svg
                  className="w-5 h-5"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M15 19l-7-7 7-7"
                  />
                </svg>
              </button>
              <button className="team-button-next w-12 h-12 bg-white border border-gray-300 hover:bg-[#0A74B2] hover:text-white hover:border-[#0A74B2] rounded-full flex items-center justify-center transition-all duration-300 shadow-lg">
                <svg
                  className="w-5 h-5"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M9 5l7 7-7 7"
                  />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default TeamSection;