import { ChevronRight } from "lucide-react";

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

interface Feature28Props {
  className?: string;
}

const Feature28 = ({ className }: Feature28Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("bg-gray-50 py-32 dark:bg-background", className)}
    >
      <div className="container">
        <div className="grid gap-10 lg:grid-cols-2 lg:gap-20">
          <div>
            <div className="rounded-lg border bg-muted p-4 md:p-6">
              <img
                src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
                alt="سازنده گردش‌کار"
                className="aspect-video max-h-[500px] w-full rounded-lg object-cover"
              />
            </div>
            <div className="p-6">
              <div className="mb-1 flex items-center gap-2 font-semibold">
                فرایندها را استاندارد و سریع کنید <Badge>فرایند هوشمند</Badge>
              </div>
              <p className="text-muted-foreground">
                قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
              </p>
              <a href="#" className="mt-4 flex items-center gap-2 font-medium">
                بیشتر بدانید
                <ChevronRight className="size-4 rtl:rotate-180" />
              </a>
            </div>
          </div>
          <div>
            <div className="rounded-lg border bg-muted p-4 md:p-6">
              <img
                src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
                alt="نمای اتوماسیون فرایند"
                className="aspect-video max-h-[500px] w-full rounded-lg object-cover"
              />
            </div>
            <div className="p-6">
              <p className="mb-1 flex items-center gap-2 font-semibold">
                فرایندهای بین‌تیمی را در یک بوم بصری طراحی کنید. هر مرحله قابل ردیابی است و گلوگاه‌ها قبل از تأخیر جدی مشخص می‌شوند.
              </p>
              <p className="text-muted-foreground">
                با اتصال ابزارهای موجود، داده بین سیستم‌ها خودکار جریان پیدا می‌کند و نیاز به کپی دستی از بین می‌رود.
              </p>
              <a href="#" className="mt-4 flex items-center gap-2 font-medium">
                بیشتر بدانید
                <ChevronRight className="size-4 rtl:rotate-180" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature28 };