"use client";

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

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

interface Feature123Props {
  className?: string;
}

const Feature123 = ({ className }: Feature123Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "container mx-auto flex flex-col gap-20 py-32 lg:flex-row",
        className,
      )}
    >
      <div className="w-full max-w-[400px] text-start">
        <span className="text-sm text-muted-foreground">گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.</span>
        <h2 className="mt-4 mb-8 text-3xl font-extrabold">
          داده پراکنده را به تصمیم تبدیل کنید
        </h2>
        <p className="text-xl text-muted-foreground">
          شاخص‌های کلیدی را یکجا ببینید
        </p>
      </div>
      <div className="flex flex-col gap-14 lg:gap-20">
        {items.map((item) => (
          <div className="relative ps-4 text-start" key={item.title}>
            <div className="absolute start-0 top-0 h-full w-1 bg-linear-to-b from-blue-500 to-purple-500" />
            <p className="mb-1 text-xl font-medium">{item.title}</p>
            <p className="text-base">{item.description}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

export { Feature123 };