import { CardSpotlight } from "@/components/aceternity/card-spotlight";
import { cn } from "@/lib/utils";

const TOOLS = [
  {
    id: "shadcn-ui",
    name: "فروش آنلاین",
    image:
      "/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg",
    className: "h-20",
  },
  {
    id: "tailwind",
    name: "فروشگاه",
    image:
      "/block-media/shadcnblocks/block/logos/tailwind-icon-black.svg",
    className: "h-14",
  },
  {
    id: "v0",
    name: "V0",
    image: "/block-media/shadcnblocks/block/logos/v0-icon.svg",
    className: "h-20",
  },
  {
    id: "react",
    name: "React",
    image:
      "/block-media/shadcnblocks/block/logos/react-icon-black.svg",
    className: "h-20",
  },
  {
    id: "astro",
    name: "Astro",
    image: "/block-media/shadcnblocks/block/logos/astro-icon.svg",
    className: "h-20",
  },
  {
    id: "nextjs",
    name: "Next.js",
    image:
      "/block-media/shadcnblocks/block/logos/nextjs-icon.svg",
    className: "h-19",
  },
] as const;

const GUIDES = [
  {
    id: "platform",
    name: "تبدیل خرید",
    title: "موجودی انبار",
  },
  {
    id: "ui-framework",
    name: "مدیریت سفارش",
    title: "بازگشت مشتری",
  },
  {
    id: "icons",
    name: "فروش آنلاین",
    title: "صفحه فرود",
  },
  {
    id: "tooling",
    name: "فروشگاه",
    title: "گزارش فروش",
  },
] as const;

interface Feature256Props {
  className?: string;
}

const Feature256 = ({ className }: Feature256Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("py-16 sm:py-20 md:py-32", className)}
    >
      <div className="container flex flex-col gap-16 sm:gap-20 md:gap-24">
        <section>
          <div className="flex flex-col items-start gap-8 text-start md:justify-between lg:flex-row">
            <h2 className="text-3xl font-light tracking-wide text-balance sm:text-xl md:text-2xll lg:w-1/3">
              فروش آنلاین را مقیاس‌پذیر کنید
            </h2>
            <div className="grid w-full grid-cols-2 gap-4 lg:w-2/3 lg:grid-cols-3">
              {TOOLS.map((logo) => (
                <CardSpotlight
                  key={logo.id}
                  className="group flex h-40 w-full items-center justify-center rounded-md border-muted bg-accent transition-all duration-300 hover:border-white/20 hover:bg-black sm:h-44 md:h-48"
                >
                  <img
                    src={logo.image}
                    alt={`لوگوی ${logo.name}`}
                    className={cn(
                      "object-contain transition-all duration-300 group-hover:brightness-0 group-hover:invert",
                      logo.className,
                    )}
                  />
                </CardSpotlight>
              ))}
            </div>
          </div>
        </section>

        <section className="flex flex-col gap-8 text-start md:items-start md:justify-between lg:flex-row">
          <h2 className="text-3xl font-light tracking-wide text-balance sm:text-xl md:text-2xll lg:w-1/3">
            تجربه خرید را روان‌تر بسازید
          </h2>
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:w-2/3">
            {GUIDES.map((item) => (
              <CardSpotlight
                className="group flex h-52 flex-col justify-between rounded-md border-muted bg-accent p-6 text-start transition-all duration-300 hover:border-white/20 hover:bg-black sm:h-64"
                key={item.id}
              >
                <div className="w-fit rounded-2xl border border-border px-4 py-2 text-center text-sm transition-all duration-300 group-hover:border-white/30 group-hover:text-white">
                  {item.name}
                </div>
                <div className="text-xl font-medium text-balance transition-all duration-300 group-hover:text-white sm:text-xl">
                  {item.title}
                </div>
              </CardSpotlight>
            ))}
          </div>
        </section>
      </div>
    </section>
  );
};

export { Feature256 };