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

interface Feature162Props {
  className?: string;
}

const Feature162 = ({ className }: Feature162Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mb-4 flex flex-col gap-16 rounded-[36px] border border-gray-200 pt-10 ps-10 md:flex-row">
          <div className="max-w-96 text-start text-lg text-pretty">
            <span className="font-semibold">پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.</span>{" "}
            داده‌های مشتری، فروش و پشتیبانی را در یک منبع واحد یکپارچه کنید و
            تصمیم‌گیری سریع‌تر داشته باشید.
          </div>
          <div className="w-full rounded-ts-[36px] rounded-ee-[36px] p-1 pe-0 pb-0">
            <img
              src="/block-media/shadcnblocks/block/placeholder-1.svg"
              alt="مدیریت تیکت"
              className="max-h-[450px] w-full rounded-ts-[36px] rounded-ee-[36px] object-cover object-bottom transition-all duration-500"
            />
          </div>
        </div>
        <div className="grid grid-cols-1 grid-rows-2 gap-4 md:grid-cols-2 md:grid-rows-1">
          <div className="flex flex-col rounded-[36px] border border-gray-200">
            <div className="p-10 text-start text-lg text-pretty">
              <span className="font-semibold">همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.</span> پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
            </div>
            <div className="flex-1 basis-auto">
              <img
                src="/block-media/shadcnblocks/block/placeholder-2.svg"
                alt="داشبورد رضایت"
                className="h-full w-full rounded-b-[36px] object-cover transition-all duration-500"
              />
            </div>
          </div>
          <div className="flex flex-col gap-4">
            <div className="flex-1 basis-auto rounded-[36px]">
              <img
                src="/block-media/shadcnblocks/block/placeholder-3.svg"
                alt="مرکز پشتیبانی مشتری"
                className="h-full w-full rounded-[36px] object-cover transition-all duration-500"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature162 };