import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface Feature {
  id: string;
  title: string;
  description: string;
  imageUrl: string;
  imageAlt: string;
}

const DATA: Feature[] = [
  {
    id: "analytics-dashboard",
    title: "گزارش زمان‌بندی‌شده",
    description: "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
    imageUrl: "/block-media/shadcnblocks/block/block-1.svg",
    imageAlt: "گزارش عملکرد",
  },
  {
    id: "team-collaboration",
    title: "تحلیل کوHORT",
    description: "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
    imageUrl: "/block-media/shadcnblocks/block/block-2.svg",
    imageAlt: "داشبورد تحلیل داده",
  },
  {
    id: "third-party-integrations",
    title: "مقایسه دوره‌ای",
    description: "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
    imageUrl: "/block-media/shadcnblocks/block/block-3.svg",
    imageAlt: "نمودار شاخص کلیدی",
  },
  {
    id: "customizable-templates",
    title: "خروجی گزارش",
    description: "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
    imageUrl: "/block-media/shadcnblocks/block/block-4.svg",
    imageAlt: "گزارش عملکرد",
  },
  {
    id: "automated-workflows",
    title: "داشبورد سفارشی",
    description: "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
    imageUrl: "/block-media/shadcnblocks/block/block-5.svg",
    imageAlt: "داشبورد تحلیل داده",
  },
  {
    id: "data-security",
    title: "فیلتر پیشرفته",
    description: "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
    imageUrl: "/block-media/shadcnblocks/block/block-6.svg",
    imageAlt: "نمودار شاخص کلیدی",
  },
  {
    id: "customer-support",
    title: "نمودار روند",
    description: "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
    imageUrl: "/block-media/shadcnblocks/block/block-3.svg",
    imageAlt: "گزارش عملکرد",
  },
  {
    id: "mobile-app",
    title: "هشدار آستانه",
    description: "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
    imageUrl: "/block-media/shadcnblocks/block/block-1.svg",
    imageAlt: "داشبورد تحلیل داده",
  },
  {
    id: "scalable-infrastructure",
    title: "گزارش زمان‌بندی‌شده",
    description: "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
    imageUrl: "/block-media/shadcnblocks/block/block-4.svg",
    imageAlt: "نمودار شاخص کلیدی",
  },
];

interface Feature190Props {
  className?: string;
}

const Feature190 = ({ className }: Feature190Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center text-center">
          <h2 className="mb-4 text-xl font-semibold tracking-tight text-balance sm:text-2xll">
            داده پراکنده را به تصمیم تبدیل کنید
          </h2>
          <p className="mb-8 max-w-3xl text-lg text-pretty text-muted-foreground sm:text-xl">
            گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3">
          {DATA.map((feature) => (
            <Card
              key={feature.id}
              className="mt-6 flex items-center rounded-none border-0 border-b border-muted pb-6 shadow-none"
            >
              <a href="#" className="shrink-0 hover:opacity-70">
                <img
                  src={feature.imageUrl}
                  alt={feature.imageAlt}
                  className="me-4 h-16 w-16 rounded-md bg-muted object-contain p-2"
                />
              </a>
              <div className="min-w-0 grow text-start">
                <h3 className="text-md font-semibold">{feature.title}</h3>
                <p className="mt-1 text-xs text-pretty text-muted-foreground">
                  {feature.description}
                </p>
              </div>
            </Card>
          ))}
        </div>

        <div className="mt-12 text-center">
          <Button variant="secondary" size="lg">
            داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.
          </Button>
        </div>
      </div>
    </section>
  );
};

export { Feature190 };