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

interface ToolItem {
  id: string;
  category: string;
  name: string;
  logo: string;
  imageAlt: string;
}

const TOOLS: ToolItem[] = [
  {
    id: "astro",
    category: "ترافیک ارگانیک",
    name: "Astro",
    logo: "/block-media/shadcnblocks/block/logos/astro-icon.svg",
    imageAlt: "داشبورد SEO",
  },
  {
    id: "gatsby",
    category: "رتبه‌بندی",
    name: "Gatsby",
    logo: "/block-media/shadcnblocks/block/logos/gatsby-icon-black.svg",
    imageAlt: "تحلیل کلمات کلیدی",
  },
  {
    id: "github",
    category: "محتوای SEO",
    name: "GitHub",
    logo: "/block-media/shadcnblocks/block/logos/github-icon-black.svg",
    imageAlt: "گزارش رتبه جستجو",
  },
  {
    id: "nextjs",
    category: "بهینه‌سازی جستجو",
    name: "Next.js",
    logo: "/block-media/shadcnblocks/block/logos/nextjs-icon.svg",
    imageAlt: "داشبورد SEO",
  },
  {
    id: "figma",
    category: "ترافیک ارگانیک",
    name: "Figma",
    logo: "/block-media/shadcnblocks/block/logos/figma.svg",
    imageAlt: "تحلیل کلمات کلیدی",
  },
  {
    id: "remix",
    category: "رتبه‌بندی",
    name: "Remix",
    logo: "/block-media/shadcnblocks/block/logos/remix-icon-black.svg",
    imageAlt: "گزارش رتبه جستجو",
  },
  {
    id: "vercel",
    category: "محتوای SEO",
    name: "Vercel",
    logo: "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
    imageAlt: "داشبورد SEO",
  },
  {
    id: "tailwind",
    category: "رتبه کلمات کلیدی را پیگیری کنید",
    name: "بهینه‌سازی جستجو",
    logo: "/block-media/shadcnblocks/block/logos/tailwind-icon-black.svg",
    imageAlt: "تحلیل کلمات کلیدی",
  },
];

interface Feature257Props {
  className?: string;
}

const ToolCard = ({ tool }: { tool: ToolItem }) => (
  <CardSpotlight className="group flex h-96 min-w-0 flex-col items-start justify-between overflow-hidden rounded-md border border-border bg-background p-2 text-start transition-all duration-300 hover:bg-black hover:text-white md:p-4">
    <div className="z-10 max-w-full rounded-md border border-border px-2 py-1 text-xs font-medium text-balance transition-colors duration-300 group-hover:border-white md:px-4 md:py-2 md:text-sm">
      {tool.category}
    </div>
    <img
      src={tool.logo}
      alt={tool.imageAlt}
      className="mx-auto mb-4 h-24 max-w-full object-contain [filter:brightness(0)] transition-all duration-300 group-hover:[filter:brightness(1)_invert(1)] dark:invert"
    />
    <h2 className="z-10 max-w-full text-xl font-normal text-balance transition-colors duration-300 lg:text-3xl">
      {tool.name}
    </h2>
  </CardSpotlight>
);

const Feature257 = ({ className }: Feature257Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "relative w-full overflow-hidden bg-muted py-16 sm:py-32",
        className,
      )}
    >
      <div className="container min-w-0">
        <div className="grid min-w-0 grid-cols-1 gap-4 md:grid-cols-2">
          {TOOLS.slice(0, 2).map((tool) => (
            <ToolCard key={tool.id} tool={tool} />
          ))}
        </div>
        <div className="mt-4 grid min-w-0 grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
          {TOOLS.slice(2, 9).map((tool) => (
            <ToolCard key={tool.id} tool={tool} />
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature257 };