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

const features = [
  {
    id: "feature-1",
    title: "مدیریت محصول",
    description:
      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
  },
  {
    id: "feature-2",
    title: "پرداخت امن",
    description:
      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
  },
  {
    id: "feature-3",
    title: "ردیابی سفارش",
    description:
      "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
  },
  {
    id: "feature-4",
    title: "تخفیف هوشمند",
    description:
      "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
  },
  {
    id: "feature-5",
    title: "موجودی انبار",
    description:
      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
  },
  {
    id: "feature-6",
    title: "بازگشت مشتری",
    description:
      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
  },
];

interface Feature63Props {
  className?: string;
}

const Feature63 = ({ className }: Feature63Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container flex flex-col items-center gap-16 lg:px-16">
        <div className="text-center">
          <h3 className="mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-xl lg:mb-6 lg:max-w-3xl lg:text-2xll">
            صفحه فرود
          </h3>
          <p className="text-muted-foreground lg:max-w-3xl lg:text-lg">
            مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
          </p>
        </div>
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {features.map((feature) => (
            <div
              key={feature.id}
              className="rounded-lg border border-border bg-accent p-6 md:p-8"
            >
              <img
                src={feature.image}
                alt={`نمای ${feature.title}`}
                className="mb-6 aspect-16/9 md:mb-8 lg:w-full"
              />
              <div className="flex flex-col">
                <p className="mb-2 text-sm font-semibold md:text-base">
                  {feature.title}
                </p>
                <p className="text-sm text-muted-foreground md:text-base">
                  {feature.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature63 };