"use client";

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

const topCard = {
  title: "تحلیل باخت معامله",
  badge: "تیم فروش",
  image: "/block-media/shadcnblocks/block/placeholder-1.svg",
  imageAlt: "صف اولویت سرنخ‌ها",
};

const bottomCards = [
  {
    title: "هدف‌گذاری تیمی",
    badge: "بستن معامله",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "داشبورد عملکرد فروش",
  },
  {
    title: "اتوماسیون پیگیری",
    badge: "رشد درآمد",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "نمودار نرخ تبدیل",
  },
];

interface Feature144Props {
  className?: string;
}

const Feature144 = ({ className }: Feature144Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <h2 className="text-center text-xl">
          پیش‌بینی درآمد را دقیق‌تر کنید
        </h2>
        <p className="mx-auto mt-3 max-w-3xl text-center text-xl text-muted-foreground">
          هر فرصت فروش را از دست ندهید
        </p>

        <Card className="mt-20 flex flex-col gap-6 p-6 md:flex-row md:gap-8 md:p-8">
          <div className="flex w-full flex-col justify-between text-start">
            <h6 className="text-xl md:text-3xl">{topCard.title}</h6>
            <Badge
              variant="outline"
              className="mt-4 w-fit bg-muted px-4 py-3 md:text-base"
            >
              {topCard.badge}
            </Badge>
          </div>
          <div className="w-full">
            <img
              src={topCard.image}
              alt={topCard.imageAlt}
              className="max-h-80 w-full rounded-lg object-cover"
            />
          </div>
        </Card>

        <div className="mt-6 flex flex-col gap-6 md:mt-8 md:flex-row md:gap-8">
          {bottomCards.map((card) => (
            <Card
              key={card.title}
              className="flex w-full flex-col gap-6 p-6 md:gap-8 md:p-8"
            >
              <div className="w-full">
                <img
                  src={card.image}
                  alt={card.imageAlt}
                  className="max-h-80 w-full rounded-lg object-cover"
                />
              </div>

              <div className="flex w-full flex-col justify-between text-start">
                <h6 className="text-xl md:text-3xl">{card.title}</h6>
                <Badge
                  variant="outline"
                  className="mt-10 w-fit bg-muted px-4 py-3 md:text-base"
                >
                  {card.badge}
                </Badge>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature144 };