"use client";

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

interface Feature141Props {
  className?: string;
}

const Feature141 = ({ className }: Feature141Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <h2 className="text-center text-2xll">عملیات سازمان را یکپارچه کنید</h2>
        <p className="mt-3 text-center text-xl text-muted-foreground">
          از خرید تا فروش در یک سیستم
        </p>

        <div className="mt-20 flex flex-col items-center justify-center gap-16 md:flex-row">
          <div className="grid w-full max-w-md grid-cols-[1fr_2fr_1fr] grid-rows-[1fr_2fr_1fr] rounded-lg bg-linear-to-br from-red-100 to-blue-100 md:max-w-xl">
            <div className="border-e-2 border-b-2 border-muted-foreground/30 p-4" />
            <div className="border-b-2 border-muted-foreground/30 p-4" />
            <div className="border-b-2 border-s-2 border-muted-foreground/30 p-4" />
            <div className="border-e-2 border-muted-foreground/30 p-4" />
            <div>
              <img
                src="/block-media/shadcnblocks/block/placeholder-1.svg"
                alt="گزارش مالی یکپارچه"
                className="max-h-[740px] w-full rounded-xl object-cover"
              />
            </div>
            <div className="border-s-2 border-muted-foreground/30 p-4" />
            <div className="border-t-2 border-e-2 border-muted-foreground/30 p-4" />
            <div className="border-t-2 border-muted-foreground/30 p-4" />
            <div className="border-t-2 border-s-2 border-muted-foreground/30 p-4" />
          </div>

          <div className="w-full max-w-sm text-start">
            <h6 className="text-3xl">
              درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.
            </h6>
            <Badge variant="outline" className="mt-8 bg-muted px-3 py-2">
              یکپارچگی
            </Badge>

            <div className="mt-16 mb-4 h-px w-full bg-muted-foreground" />

            <p className="mb-10 text-lg text-muted-foreground">
              گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
            </p>

            <p className="text-lg">مالی، انبار، خرید و فروش در یک پلتفرم به هم متصل می‌شود. مدیریت با دید end-to-end، سریع‌تر تصمیم می‌گیرد.</p>
            <p className="text-lg text-muted-foreground">
              ERP
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature141 };