'use client'
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, FreeMode, Thumbs, EffectFade, Autoplay } from "swiper";
import Link from "next/link";
const TeamMemberAbout = () => {
  return (
    <div className="team-area-2 space">
      <div className="container">
        <div className="row justify-content-center align-items-center">
          <div className="col-lg-6">
            <div className="title-area text-center">
              <span className="sub-title">Sri Murugan Temple Waterloo</span>
              <h2 className="sec-title">Our Committee Members</h2>
              {/* <p className="sec-text mb-lg-5 mb-4">
                A car repair is a service provided to fix any issues or a
                damages with your vehicle. It a involves diagnosing the problem,
                repairing or replacing
              </p> */}
            </div>
          </div>
        </div>
        <div className="row gx-30 global-carousel team-slider2">
          <Swiper
            navigation={{
              nextEl: ".team-slider2-next",
              prevEl: ".team-slider2-prev",
            }}
            spaceBetween={20}
            slidesPerGroup={1}
            speed={1000}
            pagination={{ clickable: true }}
            loop
            autoplay={{ delay: 3000, disableOnInteraction: false }}
            className="mySwiper"
            modules={[FreeMode, Navigation, Thumbs, EffectFade, Autoplay]}
            breakpoints={{
              0: {
                slidesPerView: 1,
              },
              768: {
                slidesPerView: 2,
              },
              992: {
                slidesPerView: 3,
              },
              1200: {
                slidesPerView: 3,
              },
              1400: {
                slidesPerView: 3,
              },
            }}
          >
            <SwiperSlide>
              <div>
                <div className="team-card style3">
                  <div className="team-card_img">
                    <img src="/assets/img/team/team-1-1.png" alt="Team Member" />
                  </div>
                  <div className="team-card_content">
                    <h4 className="team-card_title">
                      <Link href="#">Sivakumar <br />Somasundram</Link>
                    </h4>
                    <span className="team-card_desig">President</span>
                    {/* <div className="team-social_wrap">
                      <div className="social-btn style2">
                        <Link href="https://linkedin.com/">
                          <i className="fab fa-linkedin-in" />
                        </Link>
                        <Link href="https://www.instagram.com/">
                          <i className="fab fa-instagram" />
                        </Link>
                        <Link href="https://facebook.com/">
                          <i className="fab fa-facebook-f" />
                        </Link>
                        <Link href="https://twitter.com/">
                          <i className="fab fa-twitter" />
                        </Link>
                      </div>
                    </div> */}
                  </div>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div>
                <div className="team-card style3">
                  <div className="team-card_img">
                    <img src="/assets/img/team/team-1-3.png" alt="Team Member" />
                  </div>
                  <div className="team-card_content">
                    <h4 className="team-card_title">
                      <Link href="#">Santhanakrishnan<br /> Ramraj</Link>
                    </h4>
                    <span className="team-card_desig">Vice President</span>
                    <div className="team-social_wrap">
                      {/* <div className="social-btn style2">
                        <Link href="https://linkedin.com/">
                          <i className="fab fa-linkedin-in" />
                        </Link>
                        <Link href="https://www.instagram.com/">
                          <i className="fab fa-instagram" />
                        </Link>
                        <Link href="https://facebook.com/">
                          <i className="fab fa-facebook-f" />
                        </Link>
                        <Link href="https://twitter.com/">
                          <i className="fab fa-twitter" />
                        </Link>
                      </div> */}
                    </div>
                  </div>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div>
                <div className="team-card style3">
                  <div className="team-card_img">
                    <img src="/assets/img/team/team-1-1.png" alt="Team Member" />
                  </div>
                  <div className="team-card_content">
                    <h4 className="team-card_title">
                      <Link href="#">Sushma<br /> Rao</Link>
                    </h4>
                    <span className="team-card_desig">Secretary</span>
                    {/* <div className="team-social_wrap">
                      <div className="social-btn style2">
                        <Link href="https://linkedin.com/">
                          <i className="fab fa-linkedin-in" />
                        </Link>
                        <Link href="https://www.instagram.com/">
                          <i className="fab fa-instagram" />
                        </Link>
                        <Link href="https://facebook.com/">
                          <i className="fab fa-facebook-f" />
                        </Link>
                        <Link href="https://twitter.com/">
                          <i className="fab fa-twitter" />
                        </Link>
                      </div>
                    </div> */}
                  </div>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div>
                <div className="team-card style3">
                  <div className="team-card_img">
                    <img src="/assets/img/team/team-1-3.png" alt="Team Member" />
                  </div>
                  <div className="team-card_content">
                    <h4 className="team-card_title">
                      <Link href="#">Ken<br /> Shrishankar</Link>
                    </h4>
                    <span className="team-card_desig">Treasurer</span>
                    {/* <div className="team-social_wrap">
                      <div className="social-btn style2">
                        <Link href="https://linkedin.com/">
                          <i className="fab fa-linkedin-in" />
                        </Link>
                        <Link href="https://www.instagram.com/">
                          <i className="fab fa-instagram" />
                        </Link>
                        <Link href="https://facebook.com/">
                          <i className="fab fa-facebook-f" />
                        </Link>
                        <Link href="https://twitter.com/">
                          <i className="fab fa-twitter" />
                        </Link>
                      </div>
                    </div> */}
                  </div>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div>
                <div className="team-card style3">
                  <div className="team-card_img">
                    <img src="/assets/img/team/team-1-3.png" alt="Team Member" />
                  </div>
                  <div className="team-card_content">
                    <h4 className="team-card_title">
                      <Link href="#">Yoga<br /> Arumugam</Link>
                    </h4>
                    <span className="team-card_desig">Assistant Secretary</span>
                    {/* <div className="team-social_wrap">
                      <div className="social-btn style2">
                        <Link href="https://linkedin.com/">
                          <i className="fab fa-linkedin-in" />
                        </Link>
                        <Link href="https://www.instagram.com/">
                          <i className="fab fa-instagram" />
                        </Link>
                        <Link href="https://facebook.com/">
                          <i className="fab fa-facebook-f" />
                        </Link>
                        <Link href="https://twitter.com/">
                          <i className="fab fa-twitter" />
                        </Link>
                      </div>
                    </div> */}
                  </div>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div>
                <div className="team-card style3">
                  <div className="team-card_img">
                    <img src="/assets/img/team/team-1-3.png" alt="Team Member" />
                  </div>
                  <div className="team-card_content">
                    <h4 className="team-card_title">
                      <Link href="#">Balakrishnan<br /> Thambapillai</Link>
                    </h4>
                    <span className="team-card_desig">Volunteer</span>
                    {/* <div className="team-social_wrap">
                      <div className="social-btn style2">
                        <Link href="https://linkedin.com/">
                          <i className="fab fa-linkedin-in" />
                        </Link>
                        <Link href="https://www.instagram.com/">
                          <i className="fab fa-instagram" />
                        </Link>
                        <Link href="https://facebook.com/">
                          <i className="fab fa-facebook-f" />
                        </Link>
                        <Link href="https://twitter.com/">
                          <i className="fab fa-twitter" />
                        </Link>
                      </div>
                    </div> */}
                  </div>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div>
                <div className="team-card style3">
                  <div className="team-card_img">
                    <img src="/assets/img/team/team-1-3.png" alt="Team Member" />
                  </div>
                  <div className="team-card_content">
                    <h4 className="team-card_title">
                      <Link href="#">Balamurugan Balasubramanian</Link>
                    </h4>
                    <span className="team-card_desig">Volunteer</span>
                    {/* <div className="team-social_wrap">
                      <div className="social-btn style2">
                        <Link href="https://linkedin.com/">
                          <i className="fab fa-linkedin-in" />
                        </Link>
                        <Link href="https://www.instagram.com/">
                          <i className="fab fa-instagram" />
                        </Link>
                        <Link href="https://facebook.com/">
                          <i className="fab fa-facebook-f" />
                        </Link>
                        <Link href="https://twitter.com/">
                          <i className="fab fa-twitter" />
                        </Link>
                      </div>
                    </div> */}
                  </div>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div>
                <div className="team-card style3">
                  <div className="team-card_img">
                    <img src="/assets/img/team/team-1-3.png" alt="Team Member" />
                  </div>
                  <div className="team-card_content">
                    <h4 className="team-card_title">
                      <Link href="#">Sivapathan<br /> Prabhu</Link>
                    </h4>
                    <span className="team-card_desig">Volunteer</span>
                    {/* <div className="team-social_wrap">
                      <div className="social-btn style2">
                        <Link href="https://linkedin.com/">
                          <i className="fab fa-linkedin-in" />
                        </Link>
                        <Link href="https://www.instagram.com/">
                          <i className="fab fa-instagram" />
                        </Link>
                        <Link href="https://facebook.com/">
                          <i className="fab fa-facebook-f" />
                        </Link>
                        <Link href="https://twitter.com/">
                          <i className="fab fa-twitter" />
                        </Link>
                      </div>
                    </div> */}
                  </div>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div>
                <div className="team-card style3">
                  <div className="team-card_img">
                    <img src="/assets/img/team/team-1-3.png" alt="Team Member" />
                  </div>
                  <div className="team-card_content">
                    <h4 className="team-card_title">
                      <Link href="/team-details">Nagasubramaniam<br /> Kumarappan</Link>
                    </h4>
                    <span className="team-card_desig">Volunteer</span>
                    {/* <div className="team-social_wrap">
                      <div className="social-btn style2">
                        <Link href="https://linkedin.com/">
                          <i className="fab fa-linkedin-in" />
                        </Link>
                        <Link href="https://www.instagram.com/">
                          <i className="fab fa-instagram" />
                        </Link>
                        <Link href="https://facebook.com/">
                          <i className="fab fa-facebook-f" />
                        </Link>
                        <Link href="https://twitter.com/">
                          <i className="fab fa-twitter" />
                        </Link>
                      </div>
                    </div> */}
                  </div>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div>
                <div className="team-card style3">
                  <div className="team-card_img">
                    <img src="/assets/img/team/team-1-3.png" alt="Team Member" />
                  </div>
                  <div className="team-card_content">
                    <h4 className="team-card_title">
                      <Link href="#">Pranavan 
                      <br />
                      <br /></Link>
                    </h4>
                    <span className="team-card_desig">Volunteer</span>
                    {/* <div className="team-social_wrap">
                      <div className="social-btn style2">
                        <Link href="https://linkedin.com/">
                          <i className="fab fa-linkedin-in" />
                        </Link>
                        <Link href="https://www.instagram.com/">
                          <i className="fab fa-instagram" />
                        </Link>
                        <Link href="https://facebook.com/">
                          <i className="fab fa-facebook-f" />
                        </Link>
                        <Link href="https://twitter.com/">
                          <i className="fab fa-twitter" />
                        </Link>
                      </div>
                    </div> */}
                  </div>
                </div>
              </div>
            </SwiperSlide>
          </Swiper>
        </div>
      </div>
    </div>
  );
};

export default TeamMemberAbout;
