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

const steps = [
  {
    title: "تاریخچه مشتری",
    description:
      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
  },
  {
    title: "صندوق یکپارچه",
    description:
      "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
  },
  {
    title: "اولویت‌بندی تیکت",
    description:
      "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
  },
];

interface Feature99Props {
  className?: string;
}

const Feature99 = ({ className }: Feature99Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col gap-8 lg:flex-row lg:gap-20">
          <div className="flex h-fit items-center gap-2.5 text-lg whitespace-nowrap">
            <span className="size-3 shrink-0 rounded-full bg-green-500" />
            شروع کنید
          </div>
          <div>
            <h2 className="mb-11 text-3xl lg:text-2xll">
              زمان حل مسئله را کوتاه کنید
            </h2>
            <div className="grid gap-8 md:grid-cols-3">
              {steps.map((step, index) => (
                <div
                  key={step.title}
                  className="flex flex-col gap-1 border-s ps-4 pe-4 md:ps-8"
                >
                  <span className="font-mono text-xl lg:text-2xll">
                    {(index + 1).toLocaleString("fa-IR")}
                  </span>
                  <h3 className="mt-2 text-xl font-medium">{step.title}</h3>
                  <p className="text-sm text-muted-foreground">
                    {step.description}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature99 };