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

const cards = [
  {
    href: "#",
    image:
      "/block-media/external/unsplash/photo-1548324215-9133768e4094.jpg",
    imageAlt: "گزارش‌ساز",
    logo: "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
    logoAlt: "داده سازمانی",
    description:
      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
    cardClassName: "bg-red-100",
  },
  {
    href: "#",
    image:
      "/block-media/external/unsplash/photo-1550070881-a5d71eda5800.jpg",
    imageAlt: "تحلیل داده سازمان",
    logo: "/block-media/shadcnblocks/block/logos/nextjs-wordmark.svg",
    logoAlt: "هوش تجاری",
    description:
      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
    cardClassName: "",
  },
];

interface Feature66Props {
  className?: string;
}

const Feature66 = ({ className }: Feature66Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container flex flex-col items-start gap-8 lg:gap-12 lg:px-16">
        <h3 className="text-3xl font-semibold text-pretty md:text-xl lg:max-w-3xl lg:text-2xll">
          سطح دسترسی
        </h3>
        <div className="grid w-full grid-cols-1 gap-4 max-md:grid-rows-[1fr_1fr] md:grid-cols-2 lg:gap-6">
          {cards.map((card) => (
            <a key={card.logoAlt} href={card.href} className="h-full">
              <div
                className={cn(
                  "group relative h-full min-h-[27rem] max-w-full overflow-hidden rounded-xl md:aspect-5/4 lg:aspect-16/9",
                  card.cardClassName,
                )}
              >
                <img
                  src={card.image}
                  alt={card.imageAlt}
                  className="absolute h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
                />
                <div className="absolute inset-x-0 bottom-0 mt-auto max-h-[50%] min-h-[50%] bg-[linear-gradient(transparent,var(--primary)_80%)] mix-blend-multiply" />
                <div className="absolute inset-x-0 bottom-0 flex flex-col items-start p-6 text-primary-foreground md:p-8">
                  <img
                    src={card.logo}
                    alt={card.logoAlt}
                    className="mb-3 h-8 invert"
                  />
                  <p className="text-xl font-semibold text-white">
                    {card.description}
                  </p>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature66 };