"use client";

import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

const items = [
  {
    title: "Slack",
    description: "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
    number: 400,
  },
  {
    title: "مدیریت محصول",
    description: "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
    number: 4000,
  },
  {
    title: "Dropbox",
    description: "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
    number: 7000,
  },
  {
    title: "GitHub",
    description: "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
    number: 850,
  },
];

interface Feature139Props {
  className?: string;
}

const Feature139 = ({ className }: Feature139Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="rounded-lg border bg-card p-10 shadow-sm">
          <div className="flex w-full flex-col items-center justify-between gap-4 md:flex-row">
            <div className="w-full max-w-md text-start">
              <Badge
                variant="outline"
                className="px-3 py-2 text-muted-foreground"
              >
                مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
              </Badge>
              <h2 className="my-5 text-xl font-medium lg:text-xl">
                فروش آنلاین را مقیاس‌پذیر کنید
              </h2>
              <p className="text-sm text-muted-foreground lg:text-base">
                تجربه خرید را روان‌تر بسازید
              </p>
            </div>
            <div className="w-full max-w-lg">
              <img
                src="/block-media/shadcnblocks/block/placeholder-1.svg"
                alt="مدیریت سفارش"
                className="max-h-[420px] w-full rounded-lg object-cover"
              />
            </div>
          </div>

          <div className="mt-24 grid grid-cols-1 justify-between gap-12 sm:grid-cols-2 md:grid-cols-4">
            {items.map((item) => (
              <div key={item.title} className="text-start">
                <p className="text-xl text-muted-foreground">
                  {item.number.toLocaleString("fa-IR")}+
                </p>
                <h6 className="mt-5 mb-3 font-semibold">{item.title}</h6>
                <p className="text-sm text-muted-foreground">
                  {item.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature139 };