import { ChevronRight } from "lucide-react";

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

interface Feature23Props {
  className?: string;
}

const Feature23 = ({ className }: Feature23Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-xl flex-col items-center gap-6 text-center">
          <Badge variant="outline">عملیات سازمان را یکپارچه کنید</Badge>
          <h2 className="text-xl font-medium">
            از خرید تا فروش در یک سیستم
          </h2>
          <p className="text-lg text-muted-foreground">
            فرایندهای پشت‌صحنه را شفاف کنید
          </p>
        </div>
        <div className="mt-20 grid gap-10 lg:grid-cols-3 xl:gap-20">
          <div className="flex flex-col lg:block">
            <div className="h-full max-h-[500px] rounded-lg border bg-muted p-3">
              <img
                src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
                alt="گزارش مالی یکپارچه"
                className="h-full w-full rounded-lg object-cover"
              />
            </div>
            <div className="p-6">
              <div className="mb-1 font-semibold">هزینه عملیاتی را کنترل کنید</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 className="flex flex-col lg:block">
            <div className="h-full max-h-[500px] rounded-lg border bg-muted p-3">
              <img
                src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
                alt="داشبورد ERP"
                className="h-full w-full rounded-lg object-cover"
              />
            </div>
            <div className="p-6">
              <p className="mb-1 flex items-center gap-2 font-semibold">
                مالی، انبار، خرید و فروش در یک پلتفرم به هم متصل می‌شود. مدیریت با دید end-to-end، سریع‌تر تصمیم می‌گیرد.
              </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 className="flex flex-col lg:block">
            <div className="h-full max-h-[500px] rounded-lg border bg-muted p-3">
              <img
                src="/block-media/shadcnblocks/block/placeholder-dark-3.svg"
                alt="مدیریت عملیات"
                className="h-full 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">
                ERP
              </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 { Feature23 };