import { ArrowRight } from "lucide-react";

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

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

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

function FeatureLink({
  title,
  description,
}: {
  title: string;
  description: string;
}) {
  return (
    <a
      href="#"
      className="flex flex-col gap-4 rounded-xl border p-6 hover:border-primary"
    >
      <div className="flex items-center justify-between gap-4">
        <h3 className="text-lg font-medium">{title}</h3>
        <span className="flex size-8 shrink-0 items-center justify-center rounded-full border">
          <ArrowRight className="h-auto w-4 rtl:rotate-180" />
        </span>
      </div>
      <p className="text-muted-foreground">{description}</p>
    </a>
  );
}

interface Feature103Props {
  className?: string;
}

const Feature103 = ({ className }: Feature103Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col gap-3">
          <Badge variant="outline" className="w-fit">
            فروش آنلاین
          </Badge>
          <h2 className="text-xl md:text-xl">فروش آنلاین را مقیاس‌پذیر کنید</h2>
        </div>
        <div className="mt-10 grid gap-6 md:grid-cols-2">
          {topFeatures.map((feature) => (
            <FeatureLink
              key={feature.title}
              title={feature.title}
              description={feature.description}
            />
          ))}
          <div className="grid gap-6 md:col-span-2 md:grid-cols-3">
            {bottomFeatures.map((feature) => (
              <FeatureLink
                key={feature.title}
                title={feature.title}
                description={feature.description}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature103 };