"use client";

import { ArrowRight, Clock } from "lucide-react";

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

const DATA = [
  {
    title: "موجودی انبار",
    description:
      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
    duration: "۵ دقیقه",
  },
  {
    title: "بازگشت مشتری",
    description: "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
    duration: "۵ دقیقه",
  },
  {
    title: "صفحه فرود",
    description:
      "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
    duration: "۵ دقیقه",
  },
  {
    title: "گزارش فروش",
    description: "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
    duration: "۵ دقیقه",
  },
];

interface Feature181Props {
  className?: string;
}

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

        <div className="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
          {DATA.map((feature, index) => (
            <div
              key={feature.title}
              className={cn(
                "flex min-w-0 flex-col px-4 py-8 sm:px-6 md:py-0 md:pt-6",
                index < DATA.length - 1 && "border-b md:border-b-0",
                "md:border-s",
              )}
            >
              <div className="relative min-w-0 overflow-hidden">
                <p className="mb-10 text-6xl font-medium sm:mb-14 sm:text-8xl lg:mb-16 lg:text-9xl">
                  {(index + 1).toLocaleString("fa-IR", {
                    minimumIntegerDigits: 2,
                  })}
                </p>
                <div className="pointer-events-none absolute inset-0 bg-linear-to-e from-transparent to-background" />
              </div>

              <p className="mt-2 mb-2 text-base font-semibold sm:mt-4">
                {feature.title}
              </p>
              <p className="mb-6 text-sm text-pretty text-muted-foreground sm:text-base">
                {feature.description}
              </p>
              <Badge
                variant="outline"
                className="h-auto w-fit max-w-full gap-2 py-2 whitespace-normal"
              >
                <Clock className="size-4 shrink-0" />
                {feature.duration}
              </Badge>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature181 };