"use client";

import { useGSAP } from "@gsap/react";
import { useRef } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import React from "react";
import Image from "next/image";

gsap.registerPlugin(ScrollTrigger);

export default function OurTeam() {
  const teamScrollRef = useRef<HTMLDivElement | null>(null);
  const sectionRef = useRef<HTMLDivElement | null>(null);

  const teamMembers = [
    { name: "Karshan Zala", role: "Marketing Head", img: "/images/team_member_1.webp" },
    { name: "Priti Zala", role: "Project Manager", img: "/images/TeamMember_3.webp" },
    { name: "Pratik Singh", role: "Project Manager", img: "/images/team_member_2.webp" },
    { name: "Dharmik Patel", role: "UI/UX Designer", img: "/images/team_member_3.webp" },
    { name: "Jalpa Sarvaliya", role: "Web Developer", img: "/images/jalpa-madam.webp" },
    { name: "Mahendrasinh Rathod", role: "Flutter Developer", img: "/images/team_member_5.webp" },
    { name: "Rashmi Rathod", role: "SEO Expert", img: "/images/TeamMember_16.webp" },
    { name: "Dishant Rai", role: "Sales Marketing", img: "/images/TeamMember_12.webp" },
    { name: "Pooja Gandhi", role: "Business Analyst with QA", img: "/images/Pooja_Gandhi.webp" },
    // { name: "Kuldip Bhadrecha", role: "SEO Expert", img: "/images/team_member_7.webp" },
    { name: "Khushi Ghori", role: "Mern-Stack Developer", img: "/images/TeamMember_13.webp" },
    // { name: "Bansi Bhalodia", role: "Quality Analyst", img: "/images/team_member_8.webp" },
    // { name: "Dishant Rai", role: "Sales Marketing", img: "/images/TeamMember_12.webp" },
    { name: "Yagnik Malviya", role: "Laravel Developer", img: "/images/TeamMember_7.webp" },
   
  ];

  useGSAP(() => {
    if (!teamScrollRef.current || !sectionRef.current) return;

    const scrollWidth = teamScrollRef.current.scrollWidth;
    const containerWidth = sectionRef.current.offsetWidth;
    const scrollDistance = scrollWidth - containerWidth + 350;

    gsap.to(teamScrollRef.current, {
      x: `-${scrollDistance}px`,
      ease: "none",
      scrollTrigger: {
        trigger: sectionRef.current,
        start: "top top",
        end: `+=${scrollDistance * 1.5}`,
        pin: true,
        scrub: 2,
        anticipatePin: 1,
      },
    });
  }, []);
  

  return (
    <div ref={sectionRef} className="Our_Team_Section bg-[#040202] h-[100vh] py-20 overflow-hidden px-3 relative">
      <div>
        <div className="text-center mb-4 md:mb-7">
          <h2 className="text-[52px] font-bold text-[#FFF] Manrope">
            Our <span className="text-[#E77025]">Team</span>
          </h2>
        </div>

        {/* Wavy SVG Line */}
        {/* <img src="/images/orange_line.svg" className="absolute top-[40%] left-0 w-full -z-10" alt="" /> */}
        <svg className="absolute top-[40%] left-0 w-full -z-10" viewBox="0 0 1200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0 100 C200 150, 400 50, 600 100 S1000 150, 1200 100" stroke="#E77025" strokeWidth="2" fill="none"/>
        </svg>

        {/* Scrollable Section */}
        <div ref={teamScrollRef} className="teamScroll flex gap-28 pt-20 md:pt-16">
          {teamMembers.map((member, index) => (
            <div key={index} className="Team_custome_card text-center flex-shrink-0 w-[300px] shadow-lg rounded-lg" style={{ transform: `translateY(${index % 2 === 0 ? "-40px" : "40px"})` }}>
              <div className="image_border">
                <Image src={member.img} className="w-full transition-transform duration-300" width={1200} height={600} alt={member.name}/>
              </div>
              <div className="image_hover_text">
                <h3 className="text-[#E77025] font-medium text-[18px] mt-3">{member.name}</h3>
                <p className="text-[#FFF] font-thin text-[14px]">{member.role}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}