import { ShoppingCartIcon } from "lucide-react";

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

const COLLECTIONS = [
  {
    id: "june",
    title: "تاریخچه مشتری",
    price: `${(129).toLocaleString("fa-IR")}$`,
    link: "#",
    className: "md:col-span-1",
  },
  {
    id: "summer",
    title: "صندوق یکپارچه",
    price: `${(89).toLocaleString("fa-IR")}$`,
    link: "#",
    className: "md:col-span-1",
  },
  {
    id: "premium",
    title: "اولویت‌بندی تیکت",
    price: `${(199).toLocaleString("fa-IR")}$`,
    link: "#",
    className: "md:col-span-1",
  },
] as const;

interface Feature286Props {
  className?: string;
}

const Feature286 = ({ className }: Feature286Props) => {
  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">
        <p className="mb-4 rounded-full bg-muted px-2 py-1 text-xs">
          تیکت
        </p>
        <h2 className="relative py-2 text-center font-sans text-2xll font-semibold tracking-tighter text-balance lg:text-2xll">
          رضایت مشتری
        </h2>
        <p className="text-md mx-auto mt-5 max-w-xl px-5 text-center text-pretty text-muted-foreground lg:text-lg">
          پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
        </p>

        <div className="mt-10 grid w-full max-w-5xl grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
          {COLLECTIONS.map((card) => (
            <div
              key={card.id}
              className="flex flex-col rounded-3xl bg-muted/60 p-4 text-start"
            >
              <GlowingStarsBackgroundCard className="h-55 border-none !bg-none" />

              <div className="mt-3 flex items-center justify-start gap-3">
                <h3 className="text-xl font-semibold tracking-tighter">
                  {card.title}
                </h3>
                <span className="inline-block rounded-xl bg-muted-foreground/20 px-3 text-sm text-foreground/60">
                  مرکز تماس
                </span>
              </div>
              <div className="mt-5 flex items-center justify-between">
                <div className="flex h-full items-center justify-center gap-2 rounded-full bg-muted-foreground/20 px-7 text-sm">
                  پشتیبانی مشتری
                  <ShoppingCartIcon className="size-4 shrink-0" />
                </div>
                <div className="text-end">
                  <span className="text-xs text-muted-foreground">تیکت</span>
                  <p className="-mt-1 text-xl font-semibold tracking-tight">
                    {card.price}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>

        <Button variant="secondary" className="mt-10 h-10 rounded-full !px-5">
          رضایت مشتری
        </Button>
      </div>
    </section>
  );
};

export { Feature286 };