import { AudioLines, Box, Globe, ShieldUser, Users } from "lucide-react";

import { SparklesCore } from "@/components/shadcnblocks/sparkles";
import { cn } from "@/lib/utils";

const FEATURES = [
  {
    id: "developer-friendly",
    icon: Globe,
    title: "گزارش‌ساز",
    description:
      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
  },
  {
    id: "fast",
    icon: Box,
    title: "Pivot تعاملی",
    description: "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
  },
  {
    id: "secure",
    icon: ShieldUser,
    title: "داشبورد مدیریتی",
    description:
      "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
  },
  {
    id: "collaboration",
    icon: Users,
    title: "اتصال منبع",
    description:
      "داده پراکنده را در یک مدل واحد ساختاردهی کنید.",
  },
  {
    id: "voice",
    icon: AudioLines,
    title: "سطح دسترسی",
    description: "دسترسی مبتنی بر نقش را برای هر گزارش و داشبورد تنظیم کنید.",
  },
] as const;

interface Feature294Props {
  className?: string;
}

const Feature294 = ({ className }: Feature294Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "dark relative w-screen overflow-hidden bg-background py-32 text-foreground",
        className,
      )}
    >
      <div className="relative container flex h-full flex-col items-center justify-center">
        <div className="w-full max-w-lg text-center">
          <h1 className="relative z-20 text-center text-2xll font-semibold tracking-tighter text-balance md:text-2xll lg:text-2xll">
            تصمیم استراتژیک را داده‌محور کنید
          </h1>
          <p className="mt-4 text-pretty text-muted-foreground/50">
            داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.
          </p>
        </div>
        <div className="relative mt-5 mb-10 h-40 w-[40rem]">
          <div className="absolute inset-x-20 top-0 h-[2px] w-3/4 bg-gradient-to-r from-transparent via-indigo-500 to-transparent blur-sm" />
          <div className="absolute inset-x-20 top-0 h-px w-3/4 bg-gradient-to-r from-transparent via-indigo-500 to-transparent" />
          <div className="absolute inset-x-60 top-0 h-[5px] w-1/4 bg-gradient-to-r from-transparent via-sky-500 to-transparent blur-sm" />
          <div className="absolute inset-x-60 top-0 h-px w-1/4 bg-gradient-to-r from-transparent via-sky-500 to-transparent" />

          <SparklesCore
            background="transparent"
            minSize={0.4}
            maxSize={1}
            particleDensity={500}
            className="h-full w-full"
            particleColor="#FFFFFF"
          />

          <div className="absolute inset-0 h-full w-full bg-background [mask-image:radial-gradient(350px_130px_at_top,transparent_20%,white)]" />
        </div>

        <div className="grid w-full max-w-5xl grid-cols-1 gap-15 md:grid-cols-2 lg:grid-cols-3">
          {FEATURES.map((feature) => {
            const IconComponent = feature.icon;
            return (
              <div key={feature.id} className="flex gap-4 text-start">
                <IconComponent className="w-12 shrink-0 stroke-1 text-sky-500" />
                <div className="space-y-2">
                  <h3 className="text-xl font-medium">{feature.title}</h3>
                  <p className="text-pretty text-muted-foreground/30">
                    {feature.description}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

export { Feature294 };