import type { LucideIcon } from "lucide-react";
import {
  Calendar,
  Check,
  Infinity as InfinityIcon,
  ListChecks,
  MessagesSquare,
  Star,
  Users,
} from "lucide-react";

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

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

const features: {
  icon: LucideIcon;
  title: string;
  description: string;
}[] = [
  {
    icon: Calendar,
    title: "گزارش زمان‌بندی‌شده",
    description:
      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
  },
  {
    icon: MessagesSquare,
    title: "تحلیل کوHORT",
    description:
      "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
  },
  {
    icon: InfinityIcon,
    title: "مقایسه دوره‌ای",
    description:
      "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
  },
  {
    icon: Users,
    title: "خروجی گزارش",
    description:
      "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
  },
  {
    icon: ListChecks,
    title: "داشبورد سفارشی",
    description:
      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
  },
];

interface Feature135Props {
  className?: string;
}

const Feature135 = ({ className }: Feature135Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="relative grid gap-10 lg:grid-cols-2">
          <div className="top-10 mx-auto flex h-fit max-w-3xl flex-col items-center gap-4 lg:sticky lg:items-start">
            <Badge
              variant="outline"
              className="flex items-center gap-1 px-2.5 py-1.5 text-sm"
            >
              <Star className="h-auto w-4" />
              تحلیل داده
            </Badge>
            <h2 className="text-center text-3xl font-semibold lg:text-start lg:text-xl">
              داده پراکنده را به تصمیم تبدیل کنید
            </h2>
            <p className="text-center text-muted-foreground lg:text-start lg:text-lg">
              گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.
            </p>
            <div className="mt-6 flex flex-col gap-4">
              {highlights.map((highlight) => (
                <div key={highlight} className="flex items-center gap-2">
                  <Check className="h-auto w-4 shrink-0" />
                  <span className="text-muted-foreground">{highlight}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="flex flex-col gap-4">
            {features.map((feature) => {
              const Icon = feature.icon;
              return (
                <div
                  key={feature.title}
                  className="flex flex-col gap-3 rounded-lg border p-7"
                >
                  <div className="flex flex-col items-center gap-2.5 lg:flex-row">
                    <span className="flex size-12 items-center justify-center rounded-md bg-muted">
                      <Icon className="h-auto w-6" />
                    </span>
                    <h3 className="text-lg font-medium">{feature.title}</h3>
                  </div>
                  <p className="text-center text-sm text-muted-foreground md:text-base lg:text-start">
                    {feature.description}
                  </p>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature135 };