import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

const team = [
  {
    name: "تیم فروش",
    role: "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
    avatar: "/block-media/shadcnblocks/block/avatar-1.webp",
    alt: "صف اولویت سرنخ‌ها",
  },
  {
    name: "عملکرد فروش",
    role: "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
    avatar: "/block-media/shadcnblocks/block/avatar-2.webp",
    alt: "داشبورد عملکرد فروش",
  },
];

const stats = [
  {
    value: `${(20).toLocaleString("fa-IR")}+`,
    description: "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
  },
  {
    value: `${(100).toLocaleString("fa-IR")}+`,
    description: "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
  },
  {
    value: (25).toLocaleString("fa-IR"),
    description: "دلایل از دست دادن معامله را تحلیل کنید و استراتژی فروش را بهبود دهید.",
  },
  {
    value: `>${(30000).toLocaleString("fa-IR")}`,
    description: "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
  },
];

interface Feature120Props {
  className?: string;
}

const Feature120 = ({ className }: Feature120Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid items-center gap-10 md:gap-20 lg:grid-cols-2">
          <div className="flex flex-col gap-2.5 py-8 text-start">
            <h1 className="text-xl font-bold lg:text-2xll">
              پیش‌بینی درآمد را دقیق‌تر کنید
            </h1>
            <p className="text-muted-foreground">
              هر فرصت فروش را از دست ندهید
            </p>
            <div className="flex flex-col gap-6 py-10 sm:flex-row sm:gap-16">
              {team.map((member) => (
                <div key={member.name} className="flex gap-4 leading-5">
                  <Avatar className="size-9 rounded-full ring-1 ring-input">
                    <AvatarImage src={member.avatar} alt={member.alt} />
                  </Avatar>
                  <div className="text-sm">
                    <p className="font-medium">{member.name}</p>
                    <p className="text-muted-foreground">{member.role}</p>
                  </div>
                </div>
              ))}
            </div>
            <Button className="w-fit">شروع کنید</Button>
          </div>
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="نمودار نرخ تبدیل"
            className="h-full max-h-[420px] w-full rounded-xl object-cover"
          />
        </div>
        <Separator className="my-12" />
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
          {stats.map((stat) => (
            <div key={stat.description} className="text-start">
              <h2 className="mb-2 text-xl font-semibold md:text-2xll">
                {stat.value}
              </h2>
              <p className="text-muted-foreground">{stat.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature120 };