import { Badge } from "@/components/ui/badge";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { cn } from "@/lib/utils";

const features = [
  {
    title: "مدیریت محصول",
    category: "فروش آنلاین",
    image: {
      src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
      alt: "مدیریت سفارش",
    },
  },
  {
    title: "پرداخت امن",
    category: "فروشگاه",
    image: {
      src: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
      alt: "داشبورد فروش",
    },
  },
  {
    title: "ردیابی سفارش",
    category: "تبدیل خرید",
    image: {
      src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
      alt: "پنل فروشگاه آنلاین",
    },
  },
  {
    title: "تخفیف هوشمند",
    category: "مدیریت سفارش",
    image: {
      src: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
      alt: "مدیریت سفارش",
    },
  },
  {
    title: "موجودی انبار",
    category: "فروش آنلاین",
    image: {
      src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
      alt: "داشبورد فروش",
    },
  },
  {
    title: "بازگشت مشتری",
    category: "فروشگاه",
    image: {
      src: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
      alt: "پنل فروشگاه آنلاین",
    },
  },
];

interface Feature115Props {
  className?: string;
}

const Feature115 = ({ className }: Feature115Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center justify-center gap-4 text-center">
          <Badge variant="outline">تبدیل خرید</Badge>
          <h1 className="text-3xl font-semibold md:text-2xll">فروش آنلاین را مقیاس‌پذیر کنید</h1>
          <p className="max-w-2xl text-muted-foreground md:text-lg">
            تجربه خرید را روان‌تر بسازید
          </p>
        </div>
        <div className="mx-auto mt-20 grid max-w-7xl gap-7 md:grid-cols-2 lg:grid-cols-3">
          {features.map((feature) => (
            <Card key={feature.title} className="border-none bg-muted/60">
              <CardHeader className="text-center">
                <CardTitle className="text-lg font-semibold md:text-xl">
                  {feature.title}
                </CardTitle>
                <CardDescription className="text-muted-foreground md:text-lg">
                  {feature.category}
                </CardDescription>
              </CardHeader>
              <CardContent className="px-7 pb-7">
                <img
                  src={feature.image.src}
                  alt={feature.image.alt}
                  className="w-full rounded-xl object-cover"
                />
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature115 };