import { GlowingStarsBackgroundCard } from "@/components/aceternity/glowing-stars";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const COLLECTIONS = [
  {
    id: "june",
    title: "تحلیل احساس",
    description:
      "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
  },
  {
    id: "summer",
    title: "دستیار گفتگو",
    description:
      "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
  },
  {
    id: "premium",
    title: "خلاصه‌سازی هوشمند",
    description:
      "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
  },
  {
    id: "new-arrivals",
    title: "پیشنهاد پاسخ",
    description:
      "بهترین پاسخ را بر اساس زمینه مکالمه پیشنهاد دهید.",
  },
] as const;

interface Feature287Props {
  className?: string;
}

const Feature287 = ({ className }: Feature287Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "dark overflow-hidden bg-background py-32 text-foreground",
        className,
      )}
    >
      <div className="container flex w-full flex-col items-center justify-center px-4">
        <h2 className="relative mt-4 w-full max-w-7xl py-2 text-xl font-semibold tracking-tighter text-balance lg:text-2xll">
          با هوش مصنوعی سریع‌تر تصمیم بگیرید
          <br />
          <span className="text-muted-foreground">مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.</span>
        </h2>
        <div className="mt-10 grid w-full max-w-7xl grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {COLLECTIONS.map((card) => (
            <div
              key={card.id}
              className="flex flex-col rounded-3xl bg-muted/60 p-4 text-start"
            >
              <GlowingStarsBackgroundCard className="h-55 max-w-full border-none !bg-muted-foreground" />

              <div className="mt-3 flex items-center justify-start gap-3">
                <h3 className="text-xl font-semibold tracking-tighter">
                  {card.title}
                </h3>
              </div>
              <p className="mt-1 text-pretty text-sm text-muted-foreground/70">
                {card.description}
              </p>
            </div>
          ))}
        </div>

        <Button variant="secondary" className="mt-10 h-10 rounded-full !px-5">
          اتوماسیون AI
        </Button>
      </div>
    </section>
  );
};

export { Feature287 };