import { Sparkles, SquareDashedMousePointer } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

interface Feature21Props {
  className?: string;
}

const Feature21 = ({ className }: Feature21Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("bg-gray-50 py-32 dark:bg-background", className)}
    >
      <div className="container max-w-7xl">
        <div className="flex items-center gap-2 text-muted-foreground">
          <SquareDashedMousePointer className="size-5" />
          <p className="text-sm">مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.</p>
        </div>
        <Separator className="mt-3 mb-8" />
        <div className="flex flex-col justify-between gap-6 md:flex-row">
          <h2 className="text-3xl font-medium md:w-1/2">
            فروش آنلاین را مقیاس‌پذیر کنید
          </h2>
          <p className="text-muted-foreground md:w-1/2">
            تجربه خرید را روان‌تر بسازید
          </p>
        </div>
        <div className="mt-11 flex flex-col gap-6 md:flex-row">
          <div className="flex w-full flex-col gap-6">
            <Card className="p-6">
              <p className="mb-1 font-medium">گزارش فروش، مرجوعی و رضایت به شما کمک می‌کند کاتالوگ و قیمت‌گذاری را دقیق‌تر تنظیم کنید.</p>
              <p className="text-muted-foreground">
                محصول، موجودی و سفارش در یک پنل مدیریت می‌شود. تیم فروش آنلاین با داده لحظه‌ای، سریع‌تر تصمیم می‌گیرد و تجربه خرید بهتری می‌سازد.
              </p>
            </Card>
            <Card className="overflow-hidden pt-0">
              <img
                src="/block-media/shadcnblocks/block/placeholder-1.svg"
                alt="مدیریت سفارش"
                className="aspect-video w-full object-cover"
              />
              <div className="p-6">
                <p className="mb-1 font-medium">مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.</p>
                <p className="text-muted-foreground">
                  گزارش فروش، مرجوعی و رضایت به شما کمک می‌کند کاتالوگ و قیمت‌گذاری را دقیق‌تر تنظیم کنید.
                </p>
              </div>
            </Card>
            <Card className="p-6">
              <p className="mb-1 font-medium">محصول، موجودی و سفارش در یک پنل مدیریت می‌شود. تیم فروش آنلاین با داده لحظه‌ای، سریع‌تر تصمیم می‌گیرد و تجربه خرید بهتری می‌سازد.</p>
              <p className="text-muted-foreground">
                مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
              </p>
            </Card>
            <Card className="p-6">
              <p className="mb-1 flex items-center gap-2 font-medium">
                گزارش فروش، مرجوعی و رضایت به شما کمک می‌کند کاتالوگ و قیمت‌گذاری را دقیق‌تر تنظیم کنید. <Sparkles className="size-4" />
              </p>
              <p className="text-muted-foreground">
                محصول، موجودی و سفارش در یک پنل مدیریت می‌شود. تیم فروش آنلاین با داده لحظه‌ای، سریع‌تر تصمیم می‌گیرد و تجربه خرید بهتری می‌سازد.
              </p>
            </Card>
          </div>
          <div className="flex w-full flex-col gap-6">
            <Card className="overflow-hidden pt-0">
              <img
                src="/block-media/shadcnblocks/block/placeholder-1.svg"
                alt="داشبورد فروش"
                className="aspect-video w-full object-cover"
              />
              <div className="p-6">
                <p className="mb-1 flex items-center gap-2 font-medium">
                  مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد. <Sparkles className="size-4" />
                </p>
                <p className="text-muted-foreground">
                  گزارش فروش، مرجوعی و رضایت به شما کمک می‌کند کاتالوگ و قیمت‌گذاری را دقیق‌تر تنظیم کنید.
                </p>
              </div>
            </Card>
            <Card className="p-6">
              <p className="mb-1 font-medium">محصول، موجودی و سفارش در یک پنل مدیریت می‌شود. تیم فروش آنلاین با داده لحظه‌ای، سریع‌تر تصمیم می‌گیرد و تجربه خرید بهتری می‌سازد.</p>
              <p className="text-muted-foreground">
                مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
              </p>
            </Card>
            <Card className="p-6">
              <p className="mb-1 flex items-center gap-2 font-medium">
                گزارش فروش، مرجوعی و رضایت به شما کمک می‌کند کاتالوگ و قیمت‌گذاری را دقیق‌تر تنظیم کنید. <Sparkles className="size-4" />
              </p>
              <p className="text-muted-foreground">
                محصول، موجودی و سفارش در یک پنل مدیریت می‌شود. تیم فروش آنلاین با داده لحظه‌ای، سریع‌تر تصمیم می‌گیرد و تجربه خرید بهتری می‌سازد.
              </p>
            </Card>
            <Card className="border-dashed bg-transparent p-6 shadow-none">
              <div className="mb-1 flex items-center gap-2 font-medium">
                فروش آنلاین
                <Badge variant="outline">فروشگاه</Badge>
              </div>
              <p className="text-muted-foreground">
                مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
              </p>
            </Card>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature21 };