"use client";

import { motion } from "framer-motion";
import { ArrowRight } from "lucide-react";
import React from "react";

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

const teamMembers = [
  {
    id: 1,
    name: "علی رضوی",
    designation: "هم‌بنیان‌گذار و مدیرعامل",
    image:
      "/block-media/shadcnblocks/block/guri4/img14.png",
    className: "h-105",
  },
  {
    id: 2,
    name: "سارا احمدی",
    designation: "مدیر طراحی محصول",
    image:
      "/block-media/shadcnblocks/block/guri4/img4.png",
    className: "h-80",
  },
  {
    id: 3,
    name: "امیر محمدی",
    designation: "توسعه‌دهنده ارشد",
    image:
      "/block-media/shadcnblocks/block/guri4/img5.png",
    className: "h-120",
  },
  {
    id: 4,
    name: "مریم حسینی",
    designation: "مدیر محصول",
    image:
      "/block-media/shadcnblocks/block/guri4/img12.png",
    className: "h-82",
  },
];

interface Team13Props {
  className?: string;
}

const Team13 = ({ className }: Team13Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="relative w-full">
          <div className="flex justify-between text-sm font-medium tracking-tight lg:text-xl">
            <p>[ با تیم فوق‌العاده ما آشنا شوید ]</p>
            <a
              href="#"
              aria-label="به تیم محصول ما بپیوندید"
              className="group flex cursor-pointer items-center gap-2 text-muted-foreground hover:text-foreground"
            >
              [ به ما بپیوندید
              <ArrowRight className="size-[1em] transition-transform duration-300 group-hover:rotate-45 rtl:rotate-180" />
              ]
            </a>
          </div>

          <div className="mt-12 lg:hidden">
            <Carousel
              opts={{
                align: "start",
                loop: true,
              }}
              className="w-full"
            >
              <CarouselContent>
                {teamMembers.map((member) => (
                  <CarouselItem className="basis-1/2" key={member.id}>
                    <div className="w-full">
                      <motion.div
                        initial={{ clipPath: "inset(0% 0% 100% 0%)" }}
                        whileInView={{ clipPath: "inset(0% 0% 0% 0%)" }}
                        transition={{
                          type: "spring",
                          stiffness: 150,
                          damping: 20,
                        }}
                        className={cn(member.className, "overflow-hidden")}
                      >
                        <img
                          src={member.image}
                          alt={member.name}
                          className="pointer-events-none h-full w-full object-cover object-top"
                        />
                      </motion.div>
                    </div>
                    <div className="pt-4 pb-1 text-start">
                      <p className="text-lg font-medium tracking-tight text-foreground">
                        {member.name}
                      </p>
                      <p className="text-sm text-foreground/50">
                        {member.designation}
                      </p>
                    </div>
                  </CarouselItem>
                ))}
              </CarouselContent>
              <CarouselPrevious className="start-2" />
              <CarouselNext className="end-2" />
            </Carousel>
          </div>

          <div className="mt-12 hidden justify-between gap-4 lg:flex">
            {teamMembers.map((member, idx) => (
              <div key={member.id} className={cn("w-1/2")}>
                <motion.div
                  initial={{ clipPath: "inset(0% 0% 100% 0%)" }}
                  animate={{ clipPath: "inset(0% 0% 0% 0%)" }}
                  transition={{
                    type: "spring",
                    stiffness: 150,
                    damping: 20,
                    delay: idx * 0.05,
                  }}
                  className={cn(member.className, "overflow-hidden")}
                >
                  <img
                    src={member.image}
                    alt={member.name}
                    className="pointer-events-none h-full w-full object-cover object-top"
                  />
                </motion.div>
                <div className="pt-4 pb-1 text-start">
                  <p className="font-medium tracking-tight text-foreground lg:text-xl lg:text-lg">
                    {member.name}
                  </p>
                  <p className="text-sm text-foreground/50">
                    {member.designation}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Team13 };