"use client";

import {
  ArrowRight,
  BadgeCheck,
  Clock,
  Pyramid,
  Sparkle,
  Zap,
} from "lucide-react";

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

interface DataItem {
  title: string;
  description: string;
  image: string;
  icon: React.ReactNode;
}

const DATA: DataItem[] = [
  {
    title: "موجودی انبار",
    description:
      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    icon: <Zap className="size-5" />,
  },
  {
    title: "بازگشت مشتری",
    description:
      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    icon: <Pyramid className="size-5" />,
  },
  {
    title: "صفحه فرود",
    description:
      "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    icon: <Sparkle className="size-5" />,
  },
  {
    title: "گزارش فروش",
    description:
      "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
    icon: <BadgeCheck className="size-5" />,
  },
];

interface Feature181Props {
  className?: string;
}

const Feature181 = ({ className }: Feature181Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="text-start">
          <h2 className="mb-6 text-3xl font-semibold text-balance lg:text-xl">
            فروش آنلاین را مقیاس‌پذیر کنید
          </h2>
          <Button className="me-4 rounded-full">
            شروع کنید
            <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
          </Button>
        </div>

        <div className="mt-12 grid md:grid-cols-2 lg:grid-cols-4">
          {DATA.map((feature, index) => (
            <div
              key={feature.title}
              className="mt-0 flex flex-col border-s px-6 sm:mt-4 md:mt-6"
            >
              <div className="relative">
                <h1 className="mb-16 bg-linear-to-e from-white to-transparent bg-clip-text text-9xl">
                  {(index + 1).toLocaleString("fa-IR", {
                    minimumIntegerDigits: 2,
                  })}
                </h1>
                <div className="absolute inset-0 bg-linear-to-e from-white to-transparent opacity-100" />
              </div>

              <p className="text-md mt-4 mb-2 font-semibold">{feature.title}</p>
              <p className="text-md mb-6 text-pretty text-muted-foreground">
                {feature.description}
              </p>
              <Badge variant="outline" className="w-fit gap-2 py-2">
                <Clock className="size-4" />
                مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
              </Badge>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature181 };