import React from "react";

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

interface About18Props {
  className?: string;
}

const About18 = ({ className }: About18Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="grid grid-cols-1 gap-15 lg:grid-cols-7 lg:gap-12">
          <p className="col-span-2 font-medium">مأموریت ما</p>

          <div className="col-span-4 ml-auto max-w-4xl space-y-10 lg:pl-15">
            <h1 className="text-xl font-medium tracking-tight">
              پشتیبانی‌یار میز خدمت مشتری برای تیم‌های SaaS است. تیکت، SLA و پایگاه دانش را یکجا مدیریت می‌کنید تا زمان پاسخ کوتاه‌تر شود.
                                      </h1>
            <p className="w-fit text-lg text-foreground/40 lg:translate-y-2">
              رویکرد ما بر اولویت‌بندی هوشمند تیکت، اتوماسیون پاسخ‌های تکراری و گزارش رضایت مشتری استوار است.
                                      </p>
          </div>
        </div>
        <div className="my-20 grid grid-cols-2 items-center gap-4">
          <img
            src="/block-media/shadcnblocks/block/guri4/img2.png"
            alt=""
            className="h-150 w-full object-cover saturate-0"
          />
          <img
            src="/block-media/shadcnblocks/block/guri4/img1.png"
            alt=""
            className="h-150 w-full object-cover"
          />
        </div>
        <div className="grid grid-cols-1 gap-15 lg:grid-cols-7 lg:gap-12">
          <p className="col-span-2 font-medium">آنچه ما را پیش می‌برد</p>

          <div className="col-span-4 ml-auto max-w-4xl space-y-10 lg:pl-15">
            <h1 className="text-xl font-medium tracking-tight">
              ما تیم پشتیبانی‌یار هستیم. ابزارهایی می‌سازیم که تیم پشتیبانی با دادهٔ واقعی کیفیت خدمت را بسنجد و رضایت مشتری را بالا ببرد.
            </h1>
            <p className="w-fit text-lg text-foreground/40 lg:translate-y-2">
              همیشه می‌پرسیم: مشتری کجا گیر کرده؟ SLA چیست؟ و چطور می‌توان پاسخ را بدون افت کیفیت سریع‌تر کرد؟
                                        <br className="hidden lg:block" />
              از همین‌جا صف تیکت و مسیر حل را بهینه می‌کنیم.
                                      </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export { About18 };