"use client";

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

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

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

const features = [
  {
    icon: Globe,
    title: "یکپارچه‌سازی آسان",
    description: "ساخته‌شده با فناوری‌های روز و APIهای تمیز برای ادغام بی‌دردسر با سامانه‌های شما.",
  },
  {
    icon: Box,
    title: "عملکرد سریع",
    description: "بهینه‌سازی شده برای بارگذاری فوری و حداقل مصرف منابع.",
  },
  {
    icon: ShieldUser,
    title: "امنیت پیش‌فرض",
    description: "امنیت در سطح سازمان با حفاظت داخلی و رعایت استانداردها.",
  },
  {
    icon: Users,
    title: "همکاری تیمی",
    description: "طراحی‌شده برای تیم‌ها با همکاری لحظه‌ای و کنترل دسترسی.",
  },
  {
    icon: AudioLines,
    title: "یکپارچگی صوتی",
    description: "پردازش پیشرفته با پشتیبانی از درک زبان طبیعی.",
  },
  {
    icon: LayoutDashboard,
    title: "امکانات جامع پلتفرم",
    description: "قیمت لحظه‌ای، مدیریت سفارش و مانده حساب آنلاین، ریز معاملات ۲۴/۷، کنترل وضعیت بازار و پنل ادمین.",
  },
];

interface Feature294Props {
  className?: string;
}

const Feature294 = ({ className }: Feature294Props) => {
  return (
    <section
      className={cn(
        "dark relative w-full max-w-full overflow-x-hidden overflow-y-hidden bg-background py-32 text-foreground",
        className,
      )}
    >
      <div className="relative container mx-auto flex h-full flex-col items-center justify-center px-6" dir="rtl">
        <div className="w-full max-w-lg text-center">
          <p className="text-caption relative z-20 font-medium leading-[var(--line-height-body)] tracking-wide text-muted-foreground/80">
            راهکار
          </p>
          <h2 className="text-heading-2 relative z-20 mt-2 text-center font-semibold leading-[var(--line-height-heading)] tracking-tight text-foreground">
            یک پلتفرم اختصاصی
            <br />
            برای مدیریت کامل معاملات
          </h2>
        </div>
        <div className="relative mt-5 mb-10 h-40 w-[40rem]">
          {/* Gradients */}
          <div className="absolute inset-x-20 top-0 h-[2px] w-3/4 bg-gradient-to-r from-transparent via-primary to-transparent blur-sm" />
          <div className="absolute inset-x-20 top-0 h-px w-3/4 bg-gradient-to-r from-transparent via-primary to-transparent" />
          <div className="absolute inset-x-60 top-0 h-[5px] w-1/4 bg-gradient-to-r from-transparent via-secondary to-transparent blur-sm" />
          <div className="absolute inset-x-60 top-0 h-px w-1/4 bg-gradient-to-r from-transparent via-secondary to-transparent" />

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

          {/* Radial Gradient to prevent sharp edges */}
          <div className="absolute inset-0 h-full w-full bg-background [mask-image:radial-gradient(350px_130px_at_top,transparent_20%,white)]"></div>
        </div>

        <p className="text-body-sm mb-6 text-center font-medium leading-[var(--line-height-body)] text-muted-foreground">
          ویژگی‌های کلیدی:
        </p>

        <div className="mx-auto grid w-full max-w-5xl grid-cols-1 gap-15 text-right md:grid-cols-2 md:text-start lg:grid-cols-3">
          {features.map((feature, index) => {
            const IconComponent = feature.icon;
            return (
              <div
                key={index}
                className="flex min-h-[140px] flex-row-reverse gap-4 rounded-lg border border-border/50 bg-card/30 p-4 transition-colors hover:bg-card/50 dark:border-primary/10 dark:bg-card/20 dark:hover:bg-card/30 md:flex-row"
              >
                <IconComponent className="mt-0.5 w-12 shrink-0 stroke-1 text-primary" />
                <div className="min-w-0 space-y-2">
                  <h4 className="text-heading-4 font-medium leading-[var(--line-height-heading)] text-foreground">{feature.title}</h4>
                  <p className="text-body-sm leading-[var(--line-height-body)] text-muted-foreground">
                    {feature.description}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

export { Feature294 };