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

interface Feature30Props {
  className?: string;
}

const Feature30 = ({ className }: Feature30Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col gap-16 md:grid md:grid-cols-3 md:gap-10">
          <div className="order-1 flex h-full items-end rounded-lg bg-muted pt-10 pe-5 md:pt-20 md:pe-10">
            <img
              src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
              alt="مدیریت تیکت"
              className="h-full w-full rounded-te-lg object-cover"
            />
          </div>
          <div className="order-3 rounded-lg bg-muted pt-10 ps-5 md:order-2 md:col-span-2 md:pt-20 md:ps-10">
            <img
              src="/block-media/shadcnblocks/block/placeholder-dark-8.svg"
              alt="داشبورد رضایت"
              className="max-h-[500px] w-full rounded-ts-lg object-cover"
            />
          </div>
          <div className="order-2 -mt-6 md:order-3">
            <p className="mb-6 text-sm text-muted-foreground md:mb-12">
              پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
            </p>
            <h3 className="mb-3 text-xl font-medium md:mb-6">پاسخ آماده</h3>
            <p className="text-muted-foreground">
              SLA هوشمند
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature30 };