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

const features = [
  {
    title: "مدیریت محصول",
    description:
      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
    linkText: "فروش آنلاین",
    linkHref: "#",
  },
  {
    title: "پرداخت امن",
    description:
      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
    linkText: "فروشگاه",
    linkHref: "#",
  },
  {
    title: "ردیابی سفارش",
    description:
      "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
    linkText: "تبدیل خرید",
    linkHref: "#",
  },
];

interface Feature33Props {
  className?: string;
}

const Feature33 = ({ className }: Feature33Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto mb-14 max-w-2xl text-center">
          <h2 className="mb-8 text-xl font-semibold lg:mb-12 lg:text-2xll">
            فروش آنلاین را مقیاس‌پذیر کنید
          </h2>
          <p className="font-medium text-muted-foreground lg:text-lg">
            تجربه خرید را روان‌تر بسازید
          </p>
        </div>
        <div className="mx-auto max-w-7xl rounded-lg bg-muted pt-10 pe-10 lg:pt-28 lg:pe-32">
          <img
            src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
            alt="مدیریت سفارش"
            className="h-full max-h-[600px] w-full rounded-te-lg rounded-be-lg object-cover"
          />
        </div>
        <div className="mx-auto mt-14 grid max-w-7xl gap-11 md:grid-cols-2 lg:grid-cols-3 lg:gap-20">
          {features.map((feature, index) => (
            <Card key={index} className="border-0 py-3 shadow-none">
              <CardHeader className="px-0">
                <CardTitle className="text-xl font-medium">
                  {feature.title}
                </CardTitle>
              </CardHeader>
              <CardContent className="px-0">
                <p className="text-muted-foreground">{feature.description}</p>
              </CardContent>
              <CardFooter className="px-0">
                <a
                  href={feature.linkHref}
                  className="font-semibold hover:underline"
                >
                  {feature.linkText}
                </a>
              </CardFooter>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature33 };