import { CheckCircle } from "lucide-react";

import { cn } from "@/lib/utils";

interface Feature14Props {
  className?: string;
}

const Feature14 = ({ className }: Feature14Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="space-y-10 rounded-lg border py-10 md:px-4">
          <div className="grid rounded-lg border md:grid-cols-2">
            <div className="flex flex-col px-6 py-8 lg:px-8 lg:py-12 xl:px-12 xl:py-20">
              <h3 className="mb-3 text-xl font-medium sm:mb-5 md:text-3xl lg:text-xl">
                تحلیل باخت معامله
              </h3>
              <div className="mb-8 text-sm text-muted-foreground sm:mb-10 md:text-base">
                با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.
              </div>
              <ul className="mt-auto space-y-2 sm:space-y-3">
                <li className="flex gap-x-3">
                  <CheckCircle className="mt-0.5 size-4 shrink-0 sm:mt-1" />
                  <p className="text-sm md:text-base">
                    چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.
                  </p>
                </li>
                <li className="flex gap-x-3">
                  <CheckCircle className="mt-0.5 size-4 shrink-0 sm:mt-1" />
                  <p className="text-sm md:text-base">
                    الگوهای موفق فروش را در کل سازمان تکرار کنید. داده لحظه‌ای نشان می‌دهد کدام مرحله بیشترین افت تبدیل را دارد.
                  </p>
                </li>
              </ul>
            </div>
            <div className="relative order-first max-h-80 md:order-last md:max-h-[500px]">
              <img
                src="/block-media/shadcnblocks/block/placeholder-1.svg"
                alt="صف اولویت سرنخ‌ها"
                className="h-full w-full object-cover"
              />
              <span className="absolute top-5 inset-s-5 flex size-6 items-center justify-center rounded-sm bg-primary font-mono text-xs text-primary-foreground md:top-10 md:inset-s-10">
                ۱
              </span>
            </div>
          </div>
          <div className="grid rounded-lg border md:grid-cols-2">
            <div className="flex flex-col px-6 py-8 lg:px-8 lg:py-12 xl:px-12 xl:py-20">
              <h3 className="mb-3 text-xl font-medium sm:mb-5 md:text-3xl lg:text-xl">
                هدف‌گذاری تیمی
              </h3>
              <div className="mb-8 text-sm text-muted-foreground sm:mb-10 md:text-base">
                با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.
              </div>
              <ul className="mt-auto space-y-2 sm:space-y-3">
                <li className="flex gap-x-3">
                  <CheckCircle className="mt-0.5 size-4 shrink-0 sm:mt-1" />
                  <p className="text-sm md:text-base">
                    چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.
                  </p>
                </li>
              </ul>
            </div>
            <div className="relative order-first max-h-80 md:order-last md:max-h-[500px]">
              <img
                src="/block-media/shadcnblocks/block/placeholder-2.svg"
                alt="داشبورد عملکرد فروش"
                className="h-full w-full object-cover"
              />
              <span className="absolute top-5 inset-s-5 flex size-6 items-center justify-center rounded-sm bg-primary font-mono text-xs text-primary-foreground md:top-10 md:inset-s-10">
                ۲
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature14 };