import { ArrowRight } from "lucide-react";

import { cn } from "@/lib/utils";

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

interface Feature75Props {
  className?: string;
}

const Feature75 = ({ className }: Feature75Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container grid gap-y-12 md:grid-cols-12 md:gap-x-6 md:gap-y-0">
        <div className="md:col-span-6 lg:col-span-5">
          <h2 className="mb-3 text-xl font-semibold md:mb-4 md:text-xl lg:mb-6">
            فروش آنلاین را مقیاس‌پذیر کنید
          </h2>
          <p className="mb-8 text-muted-foreground lg:text-lg">
            تجربه خرید را روان‌تر بسازید
          </p>
        </div>
        <div className="grid gap-y-5 md:col-span-6 md:gap-y-[1.875rem] lg:col-start-7">
          {cards.map((card) => (
            <a
              key={card.tag}
              href={card.href}
              className="group flex flex-col justify-center overflow-clip rounded-2xl bg-accent px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12"
            >
              <p className="mb-3 text-xs font-medium tracking-wider">
                {card.tag}
              </p>
              <p className="mb-12 font-semibold text-muted-foreground lg:text-xl">
                {card.description}
              </p>
              <div className="flex w-fit items-center gap-4 rounded-full border border-primary px-6 py-4 group-hover:bg-primary group-hover:text-primary-foreground">
                بیشتر بدانید
                <ArrowRight className="size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature75 };