import { Github, Linkedin, Twitter } from "lucide-react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

interface TeamMember {
  id: string;
  name: string;
  role: string;
  avatar: string;
  github?: string;
  twitter?: string;
  linkedin?: string;
}

interface Team3Props {
  heading?: string;
  subheading?: string;
  description?: string;
  members?: TeamMember[];
  className?: string;
}

const Team3 = ({
  heading = "تیم ما",
  description = "تیم متنوع ما از متخصصان با دهه‌ها تجربه در طراحی، مهندسی و توسعه محصول تشکیل شده است.",
  members = [
    {
      id: "member-1",
      name: "سارا احمدی",
      role: "مدیرعامل و بنیان‌گذار",
      avatar:
        "/block-media/shadcnblocks/block/avatar-1.webp",
      github: "#",
      twitter: "#",
      linkedin: "#",
    },
    {
      id: "member-2",
      name: "امیر رضایی",
      role: "مدیر فناوری",
      avatar:
        "/block-media/shadcnblocks/block/avatar-2.webp",
      github: "#",
      twitter: "#",
      linkedin: "#",
    },
    {
      id: "member-3",
      name: "مریم حسینی",
      role: "مدیر طراحی",
      avatar:
        "/block-media/shadcnblocks/block/avatar-3.webp",
      github: "#",
      twitter: "#",
      linkedin: "#",
    },
    {
      id: "member-4",
      name: "علی محمدی",
      role: "مهندس ارشد",
      avatar:
        "/block-media/shadcnblocks/block/avatar-4.webp",
      github: "#",
      twitter: "#",
      linkedin: "#",
    },
    {
      id: "member-5",
      name: "نازنین طاهری",
      role: "مدیر محصول",
      avatar:
        "/block-media/shadcnblocks/block/avatar-5.webp",
      github: "#",
      twitter: "#",
      linkedin: "#",
    },
    {
      id: "member-6",
      name: "پویا جعفری",
      role: "طراح تجربه کاربری",
      avatar:
        "/block-media/shadcnblocks/block/avatar-6.webp",
      github: "#",
      twitter: "#",
      linkedin: "#",
    },
  ],
  className,
}: Team3Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "bg-gradient-to-b from-background to-muted/20 py-24 lg:py-32",
        className,
      )}
    >
      <div className="container mx-auto px-4">
        <div className="mb-20 text-center">
          <h2 className="mb-6 bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-xl font-bold tracking-tight text-transparent lg:text-2xll">
            {heading}
          </h2>
          <p className="mx-auto max-w-3xl text-xl leading-relaxed text-muted-foreground">
            {description}
          </p>
        </div>

        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
          {members.map((member) => (
            <div
              key={member.id}
              className="group relative overflow-hidden rounded-2xl border border-border/50 bg-card p-8 transition-all duration-300 hover:-translate-y-2 hover:border-primary/20 hover:shadow-2xl hover:shadow-primary/10"
            >
              <div className="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />

              <div className="relative flex flex-col items-center text-center">
                <div className="relative mb-6">
                  <div className="absolute inset-0 rounded-full bg-gradient-to-r from-primary/20 to-primary/10 blur-xl transition-all duration-300 group-hover:blur-2xl" />
                  <Avatar className="relative size-24 shadow-lg ring-4 ring-background transition-all duration-300 group-hover:ring-primary/20 lg:size-28">
                    <AvatarImage
                      src={member.avatar}
                      alt={member.name}
                      className="object-cover"
                    />
                    <AvatarFallback className="bg-gradient-to-br from-primary/10 to-primary/5 text-xl font-semibold">
                      {member.name
                        .split(" ")
                        .map((n) => n[0])
                        .join("")}
                    </AvatarFallback>
                  </Avatar>
                </div>

                <div className="mb-6">
                  <h3 className="mb-2 text-xl font-bold transition-colors duration-300 group-hover:text-primary">
                    {member.name}
                  </h3>
                  <p className="inline-block rounded-full bg-muted/50 px-4 py-1.5 text-sm font-medium text-muted-foreground">
                    {member.role}
                  </p>
                </div>

                <div className="flex gap-3">
                  {member.github && (
                    <a
                      href={member.github}
                      className="rounded-xl bg-muted/80 p-3 transition-all duration-300 hover:scale-110 hover:bg-primary/10 hover:shadow-lg"
                      aria-label={`گیت‌هاب ${member.name}`}
                    >
                      <Github className="size-5 text-muted-foreground transition-colors duration-300 hover:text-primary" />
                    </a>
                  )}
                  {member.twitter && (
                    <a
                      href={member.twitter}
                      className="rounded-xl bg-muted/80 p-3 transition-all duration-300 hover:scale-110 hover:bg-primary/10 hover:shadow-lg"
                      aria-label={`توییتر ${member.name}`}
                    >
                      <Twitter className="size-5 text-muted-foreground transition-colors duration-300 hover:text-primary" />
                    </a>
                  )}
                  {member.linkedin && (
                    <a
                      href={member.linkedin}
                      className="rounded-xl bg-muted/80 p-3 transition-all duration-300 hover:scale-110 hover:bg-primary/10 hover:shadow-lg"
                      aria-label={`لینکدین ${member.name}`}
                    >
                      <Linkedin className="size-5 text-muted-foreground transition-colors duration-300 hover:text-primary" />
                    </a>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Team3 };