import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

const team = [
  {
    id: "person-1",
    name: "سارا احمدی",
    role: "مدیرعامل و هم‌بنیان‌گذار",
    department: "رهبری",
    description:
      "مدیر محصول سابق در گوگل با بیش از ۱۰ سال تجربه ساخت محصولاتی که میلیون‌ها نفر روزانه از آن‌ها استفاده می‌کنند. علاقه‌مند به ایجاد اثر معنادار از طریق فناوری.",
    expertise: ["استراتژی محصول", "رهبری تیم", "رشد"],
    avatar:
      "/block-media/shadcnblocks/block/avatar-1.webp",
  },
  {
    id: "person-2",
    name: "امیر رضایی",
    role: "مدیر فناوری و هم‌بنیان‌گذار",
    department: "مهندسی",
    description:
      "مهندس سابق متا که تیم‌های ساخت زیرساخت برای میلیاردها کاربر را رهبری کرده. عاشق حل چالش‌های فنی پیچیده.",
    expertise: ["معماری سیستم", "هوش مصنوعی/یادگیری ماشین", "مقیاس‌پذیری"],
    avatar:
      "/block-media/shadcnblocks/block/avatar-2.webp",
  },
  {
    id: "person-3",
    name: "مریم حسینی",
    role: "مدیر طراحی محصول",
    department: "طراحی",
    description:
      "رهبر طراحی با سابقه در Airbnb و طراحی رابط. باور دارد طراحی عالی باید نامرئی باشد و مشکلات واقعی کاربر را حل کند.",
    expertise: ["طراحی تجربه کاربری", "سیستم‌های طراحی", "تحقیق کاربری"],
    avatar:
      "/block-media/shadcnblocks/block/avatar-3.webp",
  },
  {
    id: "person-4",
    name: "علی محمدی",
    role: "معاون مهندسی",
    department: "مهندسی",
    description:
      "تیم‌های مهندسی در درگاه پرداخت و Uber را ساخته و مقیاس داده. بر ساخت تیم‌های پرفورمنس بالا و سیستم‌های پایدار تمرکز دارد.",
    expertise: ["ساخت تیم", "سیستم‌های بک‌اند", "دواپس"],
    avatar:
      "/block-media/shadcnblocks/block/avatar-4.webp",
  },
  {
    id: "person-5",
    name: "نازنین طاهری",
    role: "مدیر بازاریابی",
    department: "بازاریابی",
    description:
      "استراتژیست بازاریابی که چند استارتاپ را از صفر به درآمد میلیونی رسانده. متخصص بازاریابی رشد و برندسازی.",
    expertise: ["بازاریابی رشد", "استراتژی برند", "محتوا"],
    avatar:
      "/block-media/shadcnblocks/block/avatar-7.webp",
  },
  {
    id: "person-6",
    name: "پویا جعفری",
    role: "مدیر فروش",
    department: "فروش",
    description:
      "رهبر فروش با سابقه ساخت تیم‌های پرفورمنس بالا و فراتر رفتن از اهداف درآمدی در بازارهای رقابتی.",
    expertise: ["فروش سازمانی", "مدیریت تیم", "موفقیت مشتری"],
    avatar:
      "/block-media/shadcnblocks/block/avatar-6.webp",
  },
];

interface Team5Props {
  className?: string;
}

const Team5 = ({ className }: Team5Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "bg-gradient-to-b from-background to-muted/20 py-24",
        className,
      )}
    >
      <div className="container mx-auto px-4">
        <div className="mb-16 text-center">
          <h2 className="mb-6 text-xl font-bold tracking-tight lg:text-2xll">
            تیم محصول ما
          </h2>
          <p className="mx-auto max-w-3xl text-xl leading-relaxed text-muted-foreground">
            تیم متنوع ما از متخصصان با دهه‌ها تجربه در طراحی، مهندسی و توسعه
            محصول تشکیل شده است.
          </p>
        </div>

        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
          {team.map((member) => (
            <Card
              key={member.id}
              className="group border-0 bg-card/50 backdrop-blur-sm transition-all duration-300 hover:shadow-lg"
            >
              <CardContent className="p-6">
                <div className="relative mb-6">
                  <Avatar className="mx-auto h-20 w-20">
                    <AvatarImage src={member.avatar} alt={member.name} />
                    <AvatarFallback className="bg-gradient-to-br from-primary/20 to-secondary/20 text-xl font-bold text-primary">
                      {member.name
                        .split(" ")
                        .map((n) => n[0])
                        .join("")}
                    </AvatarFallback>
                  </Avatar>
                </div>

                <div className="mb-4 text-center">
                  <h3 className="mb-1 text-lg font-semibold transition-colors group-hover:text-primary">
                    {member.name}
                  </h3>
                  <p className="mb-2 text-sm font-medium text-primary">
                    {member.role}
                  </p>
                  <Badge variant="outline" className="text-xs">
                    {member.department}
                  </Badge>
                </div>

                <p className="mb-4 text-sm leading-relaxed text-muted-foreground">
                  {member.description}
                </p>

                <div className="flex flex-wrap justify-center gap-1">
                  {member.expertise.map((skill, index) => (
                    <Badge
                      key={index}
                      variant="secondary"
                      className="bg-muted/50 px-2 py-1 text-xs"
                    >
                      {skill}
                    </Badge>
                  ))}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

        <div className="mt-16 border-t pt-16 text-center">
          <h3 className="mb-4 text-xl font-semibold">
            آماده‌اید آینده را با ما بسازید؟
          </h3>
          <p className="mx-auto mb-6 max-w-2xl text-muted-foreground">
            همیشه به دنبال افراد بااستعداد هستیم که اشتیاق ما به نوآوری و ایجاد
            تفاوت را دارند. فرصت‌های شغلی فعلی ما را ببینید.
          </p>
          <Button size="lg" className="px-8">
            مشاهده فرصت‌های شغلی
          </Button>
        </div>
      </div>
    </section>
  );
};

export { Team5 };