import { ArrowRight, ChevronRight } from "lucide-react";

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

const actionCards = [
  {
    href: "#",
    title: "همکاری فروش و بازاریابی",
    type: "avatars" as const,
  },
  {
    href: "#",
    title: "اولویت‌بندی سرنخ",
    type: "icon" as const,
    image: "/block-media/shadcnblocks/block/block-1.svg",
    imageAlt: "صف اولویت سرنخ‌ها",
  },
];

interface Feature80Props {
  className?: string;
}

const Feature80 = ({ className }: Feature80Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col gap-8 md:flex-row">
          <div className="aspect-5/6 overflow-clip rounded-3xl bg-accent">
            <img
              src="/block-media/shadcnblocks/block/placeholder-1.svg"
              alt="داشبورد عملکرد فروش"
              className="h-full w-full object-cover object-center"
            />
          </div>
          <div className="flex shrink-0 flex-col justify-center md:w-1/2 md:py-16 lg:ms-8 lg:ps-24 lg:text-start 2xl:ps-32">
            <p className="mb-6 text-xs font-medium tracking-wider">
              تیم فروش
            </p>
            <h2 className="mb-6 text-3xl font-bold text-pretty lg:text-2xll">
              بستن معامله
            </h2>
            <p className="mb-6 text-muted-foreground lg:text-xl">
              پیش‌بینی درآمد را دقیق‌تر کنید
            </p>
            <a
              href="#"
              className="group mb-12 flex items-center pb-3 text-accent-foreground lg:text-xl"
            >
              بیشتر بدانید
              <ArrowRight className="ms-2 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
            </a>
            <div className="flex flex-col gap-6 md:flex-row">
              {actionCards.map((card) => (
                <a
                  key={card.title}
                  href={card.href}
                  className="group flex-1 rounded-xl border border-border p-6"
                >
                  <div className="flex items-start justify-between">
                    {card.type === "avatars" ? (
                      <div className="flex items-center">
                        <Avatar className="size-10">
                          <AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
                          <AvatarFallback>SB</AvatarFallback>
                        </Avatar>
                        <Avatar className="-ms-3 size-10">
                          <AvatarImage src="/block-media/shadcnblocks/block/avatar-3.webp" />
                          <AvatarFallback>RA</AvatarFallback>
                        </Avatar>
                        <Avatar className="-ms-3 size-10">
                          <AvatarImage src="/block-media/shadcnblocks/block/avatar-2.webp" />
                          <AvatarFallback>JS</AvatarFallback>
                        </Avatar>
                      </div>
                    ) : (
                      <div className="flex items-center">
                        <img
                          src={card.image}
                          alt={card.imageAlt}
                          className="size-12 object-cover object-center"
                        />
                      </div>
                    )}
                    <ChevronRight className="mt-2 size-5 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
                  </div>
                  <p className="mt-8 font-medium lg:text-lg">{card.title}</p>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature80 };