import {
  CheckCircle2,
  LucideGitGraph,
  MessageSquare,
  Star,
  Zap,
} from "lucide-react";

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

const collaborationItems = [
  "داده سازمانی",
  "هوش تجاری",
  "گزارش‌گیری",
];

interface Feature118Props {
  className?: string;
}

const Feature118 = ({ className }: Feature118Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("bg-muted/60 py-32", className)}>
      <div className="container">
        <div className="flex flex-col gap-10">
          <div className="mx-auto flex max-w-xl flex-col gap-2.5 text-center">
            <h1 className="text-xl font-semibold md:text-2xll">
              تصمیم استراتژیک را داده‌محور کنید
            </h1>
            <p className="text-muted-foreground">
              هر تیم داشبورد خودش را داشته باشد
            </p>
          </div>
          <div className="grid grid-cols-1 gap-y-12 lg:grid-cols-3 lg:gap-12">
            <div className="col-span-2 grid gap-7 rounded-lg bg-background p-7 md:grid-cols-2">
              <div className="flex h-full flex-col justify-between gap-3 text-start">
                <div>
                  <span className="flex size-14 items-center justify-center rounded-full bg-muted">
                    <LucideGitGraph className="h-auto w-5" />
                  </span>
                  <h2 className="mt-5 text-xl font-semibold lg:text-3xl">
                    روندها را زودتر از رقبا ببینید
                  </h2>
                </div>
                <p className="text-muted-foreground">
                  داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.
                </p>
              </div>
              <img
                src="/block-media/shadcnblocks/block/placeholder-1.svg"
                alt="گزارش‌ساز"
                className="aspect-video h-full w-full rounded-xl object-cover md:aspect-auto"
              />
            </div>
            <div className="rounded-lg bg-background p-7">
              <div className="flex h-full flex-col justify-between gap-6 text-start">
                <div>
                  <span className="flex size-14 items-center justify-center rounded-full bg-muted">
                    <Zap className="h-auto w-5" />
                  </span>
                  <h2 className="mt-5 text-xl font-semibold lg:text-3xl">
                    گزارش‌هایی که مدیران واقعاً استفاده می‌کنند
                  </h2>
                </div>
                <ul className="flex flex-col gap-5">
                  {collaborationItems.map((item) => (
                    <li key={item} className="flex gap-2">
                      <CheckCircle2 className="shrink-0" />
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
          <div className="grid items-center gap-12 rounded-lg bg-background p-7 md:p-10 lg:grid-cols-3">
            <h2 className="text-start text-xl font-semibold lg:text-3xl">
              داده سازمان را به بینش تبدیل کنید
            </h2>
            <div className="flex items-center gap-5">
              <span className="text-xl font-semibold md:text-2xll">
                {(99).toLocaleString("fa-IR")}٪
              </span>
              <p className="text-muted-foreground">
                هشدارهای هوشمند زمانی که شاخص از مسیر هدف خارج می‌شود، مدیران را به‌موقع مطلع می‌کند.
              </p>
            </div>
            <div className="flex items-center gap-5">
              <span className="text-xl font-semibold md:text-2xll">
                {(5).toLocaleString("fa-IR", {
                  minimumFractionDigits: 1,
                  maximumFractionDigits: 1,
                })}
              </span>
              <div className="flex flex-col gap-2 text-start">
                <div className="flex gap-1">
                  {Array.from({ length: 5 }).map((_, index) => (
                    <Star key={index} className="fill-primary" />
                  ))}
                </div>
                <p className="text-muted-foreground">
                  داده خام از منابع مختلف جمع و مدل‌سازی می‌شود. کاربران غیرفنی هم می‌توانند گزارش بسازند و به پاسخ برسند.
                </p>
              </div>
            </div>
          </div>
          <div className="flex flex-wrap items-center justify-center gap-3">
            <MessageSquare className="h-auto w-4" />
            <p className="text-center">
              داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.
            </p>
            <a href="#" className="underline">
              گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature118 };