"use client";

import React, { useEffect } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Image from "next/image";

gsap.registerPlugin(ScrollTrigger);

const AllTeamMember = () => {
  useEffect(() => {
    // Black overlay animation
    gsap.to(".zoom_black_bot", {
      ease: "power2.inOut",
      scrollTrigger: {
        trigger: ".zoom_main_sec",
        start: "top bottom",
        end: "top top",
        scrub: true,
        // markers: true,
      },
    });

    // Zoom circle animation
    gsap.to(".zoom-circle", {
      scale: 12,
      ease: "power2.out",
      scrollTrigger: {
        trigger: ".zoom_main_sec",
        start: "top center",
        end: "bottom top",
        scrub: true,
        // markers: true,
      },
    });
  }, []);

  return (
    <div className="Team_Page_List">
      <div className="zoom_main_sec py-96 md:py-80 bg-[#FFF] relative">
        <div className="max-w-[1200px] mx-auto px-3">
          <div className="zoom_black_bot absolute top-0 left-0 w-full h-0 bg-transparent"></div>
          <div className="">
            <div className="Team_Head_Image">
              <Image
                src="/images/Karshan_Zala.webp"
                className="w-full"
                alt="Karshan Zala — Founder, Fruxinfo"
                width={1200}
                height={600}
              />
            </div>
            <div className="Bg_Line_svg absolute top-14">
              <Image
                src="/images/bg_line_svg.svg"
                className="w-full"
                alt=""
                width={1200}
                height={600}
              />
            </div>
            <div className="text-center relative">
              <h2 className="text-[#000] Manrope text-[50px] lg:text-[150px] mt-20 lg:mt-5 font-bold h-[50px] lg:h-[160px]">
                Karshan Zala
              </h2>
              <div className="zoom-circle absolute left-1/2 transform -translate-x-1/2 bg-[#E77025] w-24 h-24 rounded-full"></div>
              <h3 className="text-[#188fda] text-[70px] ld:text-[100px] h-[100px] my-0">
                &
              </h3>
              <h3 className="text-[#000] text-[30px] lg:text-[70px] font-bold Manrope my-0">
                Our Team
              </h3>
            </div>
          </div>
        </div>
      </div>
      <div className="all_team_list max-w-[1200px] mx-auto px-3">
        <div className="grid sm:grid-cols-12 gap-3">
          
          {/* Dr. Alpesh Patel */}
          <div className="sm:col-span-4">
            <div className="team_Custome_card py-2 px-5">
              <div className="img_border">
                <Image
                  src="/images/TeamMember_2.webp"
                  className="w-full"
                  alt="USA Marketing Head — Fruxinfo team"
                  width={1200}
                  height={600}
                />
              </div>
              <div className="hover_Text text-center mt-3">
                <h3 className="text-[#E77025] text-[18px] font-medium">
                  Dr. Alpesh Patel
                </h3>
                <p className="text-[16px]">USA Marketing Head</p>
              </div>
            </div>
          </div>
          
          {/* Priti Zala */}
          <div className="sm:col-span-4">
            <div className="team_Custome_card py-2 px-5">
              <div className="img_border">
                <Image
                  src="/images/TeamMember_3.webp"
                  className="w-full"
                  alt="Project Manager — Fruxinfo team"
                  width={1200}
                  height={600}
                />
              </div>
              <div className="hover_Text text-center mt-3">
                <h3 className="text-[#E77025] text-[18px] font-medium">
                  Priti Zala
                </h3>
                <p className="text-[16px]">Project Manager</p>
              </div>
            </div>
          </div>
          
          {/* Pratik Singh */}
          <div className="sm:col-span-4">
            <div className="team_Custome_card py-2 px-5">
              <div className="img_border">
                <Image
                  src="/images/TeamMember_4.webp"
                  className="w-full"
                  alt="Project Manager — Fruxinfo team"
                  width={1200}
                  height={600}
                />
              </div>
              <div className="hover_Text text-center mt-3">
                <h3 className="text-[#E77025] text-[18px] font-medium">
                  Pratik Singh
                </h3>
                <p className="text-[16px]">Project Manager</p>
              </div>
            </div>
          </div>         
          
          {/* Rashmi Rathod */}
          <div className="sm:col-span-4">
            <div className="team_Custome_card py-2 px-5">
              <div className="img_border">
                <Image
                  src="/images/TeamMember_16.webp"
                  className="w-full"
                  alt="SEO Expert — Fruxinfo team"
                  width={1200}
                  height={600}
                />
              </div>
              <div className="hover_Text text-center mt-3">
                <h3 className="text-[#E77025] text-[18px] font-medium">
                  Rashmi Rathod
                </h3>
                <p className="text-[16px]">SEO Expert</p>
              </div>
            </div>
          </div>
          
          {/* Jalpa Sarvaliya */}
          <div className="sm:col-span-4">
            <div className="team_Custome_card py-2 px-5">
              <div className="img_border">
                <Image
                  src="/images/jalpa-madam.webp"
                  className="w-full"
                  alt="Web Developer — Fruxinfo team"
                  width={1200}
                  height={600}
                />
              </div>
              <div className="hover_Text text-center mt-3">
                <h3 className="text-[#E77025] text-[18px] font-medium">
                  Jalpa Sarvaliya
                </h3>
                <p className="text-[16px]">Web Developer</p>
              </div>
            </div>
          </div>
          
          {/* Dharmik Gajera */}
          <div className="sm:col-span-4">
            <div className="team_Custome_card py-2 px-5">
              <div className="img_border">
                <Image
                  src="/images/TeamMember_8.webp"
                  className="w-full"
                  alt="UI/UX Designer — Fruxinfo team"
                  width={1200}
                  height={600}
                />
              </div>
              <div className="hover_Text text-center mt-3">
                <h3 className="text-[#E77025] text-[18px] font-medium">
                  Dharmik Gajera
                </h3>
                <p className="text-[16px]">UI/UX Designer</p>
              </div>
            </div>
          </div>
          
          {/* Mahendrasinh Rathod */}
          <div className="sm:col-span-4">
            <div className="team_Custome_card py-2 px-5">
              <div className="img_border">
                <Image
                  src="/images/TeamMember_9.webp"
                  className="w-full"
                  alt="Flutter Developer — Fruxinfo team"
                  width={1200}
                  height={600}
                />
              </div>
              <div className="hover_Text text-center mt-3">
                <h3 className="text-[#E77025] text-[18px] font-medium">
                  Mahendrasinh Rathod
                </h3>
                <p className="text-[16px]">Flutter Developer</p>
              </div>
            </div>
          </div>        
          
          {/* Dishant Rai           */}
          <div className="sm:col-span-4">
            <div className="team_Custome_card py-2 px-5">
              <div className="img_border">
                <Image
                  src="/images/TeamMember_12.webp"
                  className="w-full"
                  alt="Sales Marketing — Fruxinfo team"
                  width={1200}
                  height={600}
                />
              </div>
              <div className="hover_Text text-center mt-3">
                <h3 className="text-[#E77025] text-[18px] font-medium">
                  Dishant Rai
                </h3>
                <p className="text-[16px]">Sales Marketing</p>
              </div>
            </div>
          </div>

          {/* Pooja Gandhi*/}
          <div className="sm:col-span-4">
            <div className="team_Custome_card py-2 px-5">
              <div className="img_border">
                <Image
                  src="/images/Pooja_Gandhi.webp"
                  className="w-full"
                  alt="Pooja Gandhi — Business Analyst with QA, Fruxinfo team"
                  width={1200}
                  height={600}
                />
              </div>
              <div className="hover_Text text-center mt-3">
                <h3 className="text-[#E77025] text-[18px] font-medium">
                  Pooja Gandhi
                </h3>
                <p className="text-[16px]">Business Analyst with QA</p>
              </div>
            </div>
          </div>
          
          {/* Khushi Ghori*/}
          <div className="sm:col-span-4">
            <div className="team_Custome_card py-2 px-5">
              <div className="img_border">
                <Image
                  src="/images/TeamMember_13.webp"
                  className="w-full"
                  alt="MERN Stack Developer — Fruxinfo team"
                  width={1200}
                  height={600}
                />
              </div>
              <div className="hover_Text text-center mt-3">
                <h3 className="text-[#E77025] text-[18px] font-medium">
                  Khushi Ghori
                </h3>
                <p className="text-[16px]">Mern-Stack Developer</p>
              </div>
            </div>
          </div>
          
          {/* Yagnik Malviya */}
          <div className="sm:col-span-4">
            <div className="team_Custome_card py-2 px-5">
              <div className="img_border">
                <Image
                  src="/images/TeamMember_7.webp"
                  className="w-full"
                  alt="Laravel Developer — Fruxinfo team"
                  width={1200}
                  height={600}
                />
              </div>
              <div className="hover_Text text-center mt-3">
                <h3 className="text-[#E77025] text-[18px] font-medium">
                  Yagnik Malviya
                </h3>
                <p className="text-[16px]">Laravel Developer</p>
              </div>
            </div>
          </div>


          {/* OLD Employee */}

          {/* Dhanesh Kodiyatar           */}
          {/* <div className="sm:col-span-4">
            <div className="team_Custome_card py-2 px-5">
              <div className="img_border">
                <Image
                  src="/images/TeamMember_10.webp"
                  className="w-full"
                  alt="Laravel Developer — Fruxinfo team"
                  width={1200}
                  height={600}
                />
              </div>
              <div className="hover_Text text-center mt-3">
                <h3 className="text-[#E77025] text-[18px] font-medium">
                  Dhanesh Kodiyatar
                </h3>
                <p className="text-[16px]">Laravel Developer</p>
              </div>
            </div>
          </div> */}
          
          {/* Kuldip Bhadrecha */}
          {/* <div className="sm:col-span-4">
            <div className="team_Custome_card py-2 px-5">
              <div className="img_border">
                <Image
                  src="/images/TeamMember_11.webp"
                  className="w-full"
                  alt="SEO Expert — Fruxinfo team"
                  width={1200}
                  height={600}
                />
              </div>
              <div className="hover_Text text-center mt-3">
                <h3 className="text-[#E77025] text-[18px] font-medium">
                  Kuldip Bhadrecha
                </h3>
                <p className="text-[16px]">SEO Expert</p>
              </div>
            </div>
          </div> */}

          {/* Bansi Bhalodia */}
          {/* <div className="sm:col-span-4">
            <div className="team_Custome_card py-2 px-5">
              <div className="img_border">
                <Image
                  src="/images/TeamMember_6.webp"
                  className="w-full"
                  alt="Software Tester — Fruxinfo team"
                  width={1200}
                  height={600}
                />
              </div>
              <div className="hover_Text text-center mt-3">
                <h3 className="text-[#E77025] text-[18px] font-medium">
                  Bansi Bhalodia
                </h3>
                <p className="text-[16px]">Software Tester</p>
              </div>
            </div>
          </div> */}


          {/* <div className='sm:col-span-4'>
            <div className='team_Custome_card py-2 px-5'>
              <div className='img_border'>
                <Image src="/images/TeamMember_20.webp" className='w-full' alt="Harsh Patel — Web Developer, Fruxinfo team"  width={1200} height={600}/>
              </div>
              <div className='hover_Text text-center mt-3'>
                <h3 className='text-[#E77025] text-[18px] font-medium'>Harsh Patel</h3>
                <p className='text-[16px]'>Web Developer</p>
              </div>
            </div>
          </div> */}
        </div>
      </div>
    </div>
  );
};

export default AllTeamMember;
