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

import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

const teamMembers = [
  {
    name: "رضا کریمی",
    role: "هم‌بنیان‌گذار و مدیرعامل",
    image:
      "/block-media/shadcnblocks/block/avatar-2.webp",

    bio: "با پیشینه‌ای در توسعه نرم‌افزار و چشم‌اندازی برای بهره‌وری، رضا تیم را با تمرکز بر نوآوری کاربرمحور رهبری می‌کند.",
    social: {
      twitter: "#",
      github: "#",
    },
  },
  {
    name: "زهرا موسوی",
    role: "مدیر ارشد محصول",
    image:
      "/block-media/shadcnblocks/block/avatar-1.webp",

    bio: "زهرا سال‌ها تجربه در طراحی و استراتژی محصول دارد و اطمینان می‌دهد هر قابلیت بالاترین استانداردهای کارایی و طراحی را داشته باشد.",
    social: {
      twitter: "#",
    },
  },
  {
    name: "امیر نوری",
    role: "مدیر مهندسی",
    image:
      "/block-media/shadcnblocks/block/avatar-4.webp",

    bio: "امیر چشم‌انداز فنی را هدایت می‌کند، بر توسعه نظارت دارد و اطمینان می‌دهد محصول برای کاربران در سراسر جهان پایدار، امن و مقیاس‌پذیر باشد.",
    social: {
      twitter: "#",
      github: "#",
    },
  },
  {
    name: "سمیه رحیمی",
    role: "مدیر بازاریابی",
    image:
      "/block-media/shadcnblocks/block/avatar-3.webp",

    bio: "سمیه با درک عمیق از بازار B2B و تخصص در بازاریابی محتوا، مأموریت و مزایای محصول ما را به مشتریان هدف منتقل می‌کند.",
    social: {
      twitter: "#",
    },
  },
];

interface Team4Props {
  className?: string;
}

const Team4 = ({ className }: Team4Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col gap-6 py-4 text-start lg:py-8">
          <Badge
            variant="outline"
            className="w-fit gap-1 bg-card px-3 text-sm font-normal tracking-tight shadow-sm"
          >
            <Users className="size-4" />
            <span>با هم پیش برویم!</span>
          </Badge>
          <h2 className="text-3xl leading-tight tracking-tight md:text-xl lg:text-2xll">
            ذهن‌های پشت مأموریت
          </h2>
          <p className="max-w-[600px] tracking-[-0.32px] text-muted-foreground">
            تیمی متعهدی که با شور و اشتیاق آینده بهره‌وری را می‌سازد.
          </p>
        </div>

        <div className="mt-10 grid gap-x-12 gap-y-16 sm:grid-cols-2 md:mt-14 lg:grid-cols-4">
          {teamMembers.map((member) => (
            <div key={member.name} className="group flex flex-col text-start">
              <img
                src={member.image}
                alt={member.name}
                width={80}
                height={80}
                className="rounded-full object-contain"
              />
              <div className="mt-6 flex flex-col tracking-[-0.32px]">
                <h3 className="text-lg">{member.name}</h3>
                <p className="text-muted-foreground-subtle">{member.role}</p>
                <p className="mt-4 text-sm tracking-[-0.36px] text-muted-foreground">
                  {member.bio}
                </p>
                <div className="mt-6 flex gap-2">
                  {member.social.twitter && (
                    <a
                      href={member.social.twitter}
                      className="hover:text-foreground"
                      aria-label={`توییتر ${member.name}`}
                    >
                      <Twitter />
                    </a>
                  )}
                  {member.social.github && (
                    <a
                      href={member.social.github}
                      className="hover:text-foreground"
                      aria-label={`گیت‌هاب ${member.name}`}
                    >
                      <Github />
                    </a>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Team4 };