import { Calendar, ChevronRight, Terminal, Timer, Wallet } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
} from "@/components/ui/card";

const FEATURES = [
  {
    id: "wire-speed",
    description: "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
    srLabel: "فروش آنلاین",
    icon: Timer,
    href: "/pricing",
  },
  {
    id: "fednow",
    description: "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
    srLabel: "FedNow",
    icon: Wallet,
    href: "/pricing",
  },
  {
    id: "api-speed",
    description: "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
    srLabel: "فروشگاه",
    icon: Terminal,
    href: "/pricing",
  },
  {
    id: "settlement",
    description: "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
    srLabel: "تبدیل خرید",
    icon: Calendar,
    href: "/pricing",
  },
];

export function Feature194() {
  return (
    <section dir="rtl" lang="fa" className="relative py-32">
      <div className="container max-w-5xl">
        <div className="text-center">
          <h3 className="font-mono text-sm font-semibold text-accent-foreground">
            مدیریت محصول
          </h3>

          <h2 className="mt-4 text-xl font-semibold tracking-tight text-balance md:text-2xll lg:text-2xll">
            فروش آنلاین را مقیاس‌پذیر کنید
          </h2>
          <p className="mt-3 text-xl font-medium text-pretty text-muted-foreground md:text-xl">
            مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
          </p>
        </div>

        <div className="mt-8 grid grid-cols-2 gap-2.5 md:mt-12 lg:mt-20 lg:grid-cols-4 lg:gap-6">
          {FEATURES.map((feature) => {
            const Icon = feature.icon;

            return (
              <Card key={feature.id} className="flex flex-col text-start">
                <CardHeader className="max-md:p-3">
                  <Icon className="size-8 text-primary" />
                  <CardDescription className="mt-4 font-medium text-pretty text-foreground">
                    {feature.description}
                  </CardDescription>
                </CardHeader>
                <CardContent className="mt-auto max-md:p-3">
                  <Button
                    variant="outline"
                    asChild
                    className="group w-[min(100%,300px)] gap-1 border-border"
                  >
                    <a href={feature.href}>
                      بیشتر بدانید
                      <span className="sr-only">
                        {" "}
                        درباره {feature.srLabel}
                      </span>
                      <ChevronRight className="size-4 transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
                    </a>
                  </Button>
                </CardContent>
              </Card>
            );
          })}
        </div>
      </div>
    </section>
  );
}