import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import { Autoplay, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

import { useTeam } from "@/hooks/queries/useTeam";
import PremiumBadge from "../shared/PremiumBadge";

export default function TeamSection() {
  const { data: teamdata } = useTeam();

  const team = teamdata?.data.data;

  const ref = useRef<HTMLElement>(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });
  const shouldScroll = team?.length >= 5;

  return (
    <section id="team" ref={ref} className="pt-20 1relative overflow-hidden">
      <div className="absolute inset-0 opacity-30">
        <div className="absolute top-0 right-1/4 w-72 h-72 bg-neon-purple/10 rounded-full blur-[120px]" />
        <div className="absolute bottom-0 left-1/4 w-64 h-64 bg-primary/10 rounded-full blur-xl" />
      </div>

      <div className="container mx-auto px-4 relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <PremiumBadge text="Our experts" />
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
            Meet Our{" "}
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground">
              Team
            </span>
          </h2>
          <p className="text-muted-foreground max-w-2xl mx-auto text-lg">
            A passionate team of innovators, designers, and developers.
          </p>
        </motion.div>

        <div className="w-full">
          <Swiper
            direction={"horizontal"}
            slidesPerView={1}
            spaceBetween={20}
            loop={shouldScroll}
            autoplay={
              shouldScroll
                ? {
                    delay: 3000,
                    disableOnInteraction: false,
                  }
                : false
            }
            pagination={{ clickable: true }}
            modules={[Autoplay, Pagination]}
            className="pb-12"
            breakpoints={{
              640: { slidesPerView: 2 },
              1024: { slidesPerView: 3 },
              1280: { slidesPerView: 4 },
            }}
          >
            {team?.map((member, index) => (
              <SwiperSlide key={member._id}>
                <motion.div
                  initial={{ opacity: 0, y: 30 }}
                  animate={isInView ? { opacity: 1, y: 0 } : {}}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  whileHover={{ y: -8 }}
                  className="group text-center p-4 h-full"
                >
                  <div className="relative mb-6 mx-auto w-48 h-48">
                    <div className="absolute inset-0 rounded-full bg-gradient-to-r from-primary via-neon-purple to-neon-green opacity-0 group-hover:opacity-100 blur-md transition-opacity duration-500" />
                    <div className="relative w-full h-full rounded-full overflow-hidden border-4 border-border group-hover:border-primary/50 transition-colors duration-300 ">
                      <img
                        src={member.image}
                        alt={member.name}
                        className="absolute inset-0 w-full h-full object-cover object-top transition-transform duration-500 group-hover:scale-110"
                      />
                    </div>
                  </div>

                  <h3 className="text-xl font-bold mb-1 group-hover:text-primary transition-colors">
                    {member.name}
                  </h3>
                  <p className="text-primary font-medium text-sm mb-2">
                    {member.role}
                  </p>
                  <p className="text-muted-foreground text-sm max-w-[250px] mx-auto">
                    {member.bio}
                  </p>
                </motion.div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </div>
    </section>
  );
}
