import { ChevronRight } from "lucide-react";

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

const cards = [
  {
    badge: "تحلیل داده",
    title: "گزارش زمان‌بندی‌شده",
    description: "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
    linkText: "ثبت‌نام",
    image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
    imageAlt: "گزارش عملکرد",
  },
  {
    badge: "داشبورد",
    title: "تحلیل کوHORT",
    description: "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
    linkText: "شروع کنید",
    image: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
    imageAlt: "داشبورد تحلیل داده",
  },
];

interface Feature111Props {
  className?: string;
}

const Feature111 = ({ className }: Feature111Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-xl flex-col items-center gap-5 text-center">
          <Badge variant="outline">شاخص کلیدی</Badge>
          <h2 className="text-3xl font-semibold md:text-2xll">
            داده پراکنده را به تصمیم تبدیل کنید
          </h2>
          <p className="text-muted-foreground md:text-lg">
            شاخص‌های کلیدی را یکجا ببینید
          </p>
          <a
            href="#"
            className="flex items-center gap-1 text-sm font-medium md:text-base"
          >
            بینش لحظه‌ای
            <ChevronRight className="h-auto w-4 rtl:rotate-180" />
          </a>
        </div>
        <div className="mt-20 grid gap-10 md:grid-cols-2">
          {cards.map((card) => (
            <div
              key={card.title}
              className="-mx-7 rounded-lg bg-muted px-14 pt-7 md:mx-0"
            >
              <div className="mx-auto flex flex-col items-center gap-2.5 text-center md:gap-5">
                <Badge variant="outline" className="bg-background">
                  {card.badge}
                </Badge>
                <h2 className="text-lg font-semibold md:text-3xl">
                  {card.title}
                </h2>
                <p className="text-muted-foreground md:text-lg">
                  {card.description}
                </p>
                <a
                  href="#"
                  className="flex items-center gap-1 text-sm font-medium md:text-base"
                >
                  {card.linkText}
                  <ChevronRight className="h-auto w-4 rtl:rotate-180" />
                </a>
                <img
                  src={card.image}
                  alt={card.imageAlt}
                  className="mt-5 max-h-[400px] rounded-t-lg"
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature111 };