import { Check } from "lucide-react";

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

interface Feature6Props {
  className?: string;
}

const Feature6 = ({ className }: Feature6Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid items-center gap-8 lg:grid-cols-2">
          <div className="flex flex-col lg:items-start lg:text-start">
            <h1 className="my-6 text-3xl font-semibold text-pretty lg:text-2xll">
              زمان حل مسئله را کوتاه کنید
            </h1>
            <p className="mb-8 max-w-xl text-muted-foreground lg:text-lg">
              پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
            </p>
            <ul className="ms-4 space-y-4 text-start">
              <li className="flex items-center gap-3">
                <Check className="size-5 shrink-0" />
                <p className="text-muted-foreground">
                  ردیابی زمان پاسخ و نرخ رضایت
                </p>
              </li>
              <li className="flex items-center gap-3">
                <Check className="size-5 shrink-0" />
                <p className="text-muted-foreground">
                  صندوق ورودی یکپارچه برای ایمیل و چت
                </p>
              </li>
              <li className="flex items-center gap-3">
                <Check className="size-5 shrink-0" />
                <p className="text-muted-foreground">
                  پاسخ‌های آماده برای تیکت‌های پرتکرار
                </p>
              </li>
            </ul>
          </div>
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="مدیریت تیکت"
            className="max-h-96 w-full rounded-md object-cover"
          />
        </div>
      </div>
    </section>
  );
};

export { Feature6 };