import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const integrations = [
  {
    id: "1",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    text: "با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.",
    imageAlt: "صف اولویت سرنخ‌ها",
  },
  {
    id: "2",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    text: "چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.",
    imageAlt: "داشبورد عملکرد فروش",
  },
  {
    id: "3",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    text: "الگوهای موفق فروش را در کل سازمان تکرار کنید. داده لحظه‌ای نشان می‌دهد کدام مرحله بیشترین افت تبدیل را دارد.",
    imageAlt: "نمودار نرخ تبدیل",
  },
];

interface Feature158Props {
  className?: string;
}

const Feature158 = ({ className }: Feature158Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mb-12 flex flex-col items-center">
          <h4 className="mb-4 text-muted-foreground/50">
            همکاری فروش و بازاریابی
          </h4>
          <h1 className="mb-6 text-center text-xl font-semibold text-balance sm:text-2xll lg:text-[56px]">
            پیش‌بینی درآمد را دقیق‌تر کنید
          </h1>
          <h3 className="text-center text-xl text-pretty">
            اولویت‌بندی سرنخ
          </h3>
        </div>
        <div className="flex flex-col items-center">
          <div className="mb-16 flex flex-col items-center justify-between gap-12 md:flex-row">
            {integrations.map((item) => (
              <div key={item.id} className="text-center">
                <img
                  src={item.image}
                  alt={item.imageAlt}
                  className="mb-8 aspect-[1.6] w-full rounded-2xl border border-dashed object-cover"
                />
                <p className="text-sm text-pretty">{item.text}</p>
              </div>
            ))}
          </div>
          <Button>با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.</Button>
        </div>
      </div>
    </section>
  );
};

export { Feature158 };