import { CircleCheckBig } from "lucide-react";

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

const FEATURES = [
  { id: "design-templates", label: "تیکت" },
  { id: "collaborative-editing", label: "رضایت مشتری" },
  { id: "resource-libraries", label: "مرکز تماس" },
  { id: "feedback-tools", label: "پشتیبانی مشتری" },
  { id: "asset-export", label: "تیکت" },
  { id: "version-history", label: "رضایت مشتری" },
] as const;

interface Feature227Props {
  className?: string;
}

const Feature227 = ({ className }: Feature227Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid gap-10 lg:grid-cols-2">
          <div className="text-start">
            <h2 className="mb-5 text-2xll font-medium text-balance lg:text-2xll">
              زمان حل مسئله را کوتاه کنید
            </h2>
            <p className="mb-12 text-lg text-pretty text-muted-foreground">
              پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
            </p>
            <ul className="grid max-w-xl gap-5 sm:grid-cols-2">
              {FEATURES.map((feature) => (
                <li key={feature.id} className="flex items-center gap-1.5">
                  <CircleCheckBig className="size-5 shrink-0" />
                  <p className="text-sm font-medium">{feature.label}</p>
                </li>
              ))}
            </ul>
          </div>
          <div className="relative">
            <div className="absolute inset-0 bg-linear-to-t from-background to-transparent to-30%" />
            <div className="absolute inset-0 bg-linear-to-l from-background to-transparent to-30% rtl:bg-linear-to-r" />
            <img
              src="/block-media/shadcnblocks/block/placeholder-1.svg"
              alt="مدیریت تیکت"
              className="max-h-[500px] w-full rounded-2xl border border-border object-cover lg:max-h-none"
            />
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature227 };