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

const values = [
  {
    title: "داشبورد سفارشی",
    description:
      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
  },
  {
    title: "فیلتر پیشرفته",
    description:
      "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
  },
  {
    title: "نمودار روند",
    description:
      "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
  },
  {
    title: "هشدار آستانه",
    description:
      "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
  },
];

interface Feature42Props {
  className?: string;
}

const Feature42 = ({ className }: Feature42Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid gap-8 lg:grid-cols-3">
          <h2 className="row-span-2 text-start text-3xl font-semibold lg:text-2xll">
            داده پراکنده را به تصمیم تبدیل کنید
          </h2>
          {values.map((value) => (
            <div key={value.title}>
              <h3 className="mb-2 text-xl font-medium">{value.title}</h3>
              <p className="text-muted-foreground">{value.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature42 };