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

interface CaseStudyCard {
  href: string;
  image: string;
  imageAlt: string;
  logo: string;
  logoAlt: string;
  logoClassName: string;
  title: string;
  featured?: boolean;
}

const CASE_STUDIES: CaseStudyCard[] = [
  {
    href: "#",
    image:
      "/block-media/external/unsplash/photo-1623496258831-091279081ac5.jpg",
    imageAlt: "جلسه همکاری تیم در فضای کاری مدرن",
    logo: "/block-media/shadcnblocks/block/logos/vercel-wordmark-white.svg",
    logoAlt: "لوگوی Vercel",
    logoClassName: "isolate h-7 w-fit",
    title: "افزایش ۴۰٪ نرخ تبدیل با اتوماسیون بازاریابی",
    featured: true,
  },
  {
    href: "#",
    image:
      "/block-media/external/unsplash/photo-1572733438515-8f143a854f72.jpg",
    imageAlt: "تحلیل داده و برنامه‌ریزی استراتژیک کسب‌وکار",
    logo: "/block-media/shadcnblocks/block/logos/react-wordmark-white.svg",
    logoAlt: "لوگوی React",
    logoClassName: "isolate h-9 w-fit",
    title: "بهبود ۳ برابری بهره‌وری تیم فروش با داشبورد تحلیلی",
  },
  {
    href: "#",
    image:
      "/block-media/external/unsplash/photo-1648665336208-def77a1ec189.jpg",
    imageAlt: "طراحی رابط کاربری و توسعه محصول دیجیتال",
    logo: "/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark-white.svg",
    logoAlt: "لوگوی shadcn/ui",
    logoClassName: "isolate h-8 w-fit",
    title: "کاهش ۵۰٪ هزینه‌های عملیاتی با یکپارچه‌سازی داده‌ها",
  },
  {
    href: "#",
    image:
      "/block-media/external/unsplash/photo-1648665336176-7cb286e77d63.jpg",
    imageAlt: "کار تیمی در پروژه فناوری و نوآوری",
    logo: "/block-media/shadcnblocks/block/logos/tailwind-wordmark-white.svg",
    logoAlt: "لوگوی Tailwind CSS",
    logoClassName: "isolate h-7 w-fit",
    title: "رشد ۲.۵ برابری درآمد سالانه با استراتژی دیجیتال",
  },
  {
    href: "#",
    image:
      "/block-media/external/unsplash/photo-1647418413367-5ef9301153d9.jpg",
    imageAlt: "ارائه راهکارهای دیجیتال در محیط حرفه‌ای",
    logo: "/block-media/shadcnblocks/block/logos/nextjs-wordmark-white.svg",
    logoAlt: "لوگوی Next.js",
    logoClassName: "isolate h-6 w-fit",
    title: "افزایش ۶۰٪ نرخ نگهداشت مشتریان با سامانه مدیریت ارتباط با مشتری هوشمند",
    featured: true,
  },
  {
    href: "#",
    image:
      "/block-media/external/unsplash/photo-1647517649469-ba454dc72896.jpg",
    imageAlt: "مدیریت زیرساخت و توسعه سامانه‌های ابری",
    logo: "/block-media/shadcnblocks/block/logos/supabase-wordmark-white.svg",
    logoAlt: "لوگوی Supabase",
    logoClassName: "isolate h-8 w-fit",
    title: "اتوماسیون ۷۰٪ فرآیندهای تکراری با راهکارهای سازمانی",
  },
];

interface CaseStudies1Props {
  className?: string;
}

const CaseStudies1 = ({ className }: CaseStudies1Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto grid max-w-2xl gap-6 lg:max-w-5xl lg:grid-cols-2">
          {CASE_STUDIES.map((caseStudy) => (
            <a
              key={caseStudy.logo}
              href={caseStudy.href}
              className={cn(
                "group relative flex h-full flex-col justify-between overflow-hidden rounded-2xl p-6 shadow-md lg:p-10",
                caseStudy.featured
                  ? "row-span-2 aspect-square lg:aspect-auto"
                  : "aspect-3/2 md:aspect-2/1",
              )}
            >
              <img
                src={caseStudy.image}
                alt={caseStudy.imageAlt}
                className="absolute inset-0 h-full w-full rounded-2xl object-cover transition-transform duration-700 group-hover:scale-105"
              />
              <div className="absolute inset-0 bg-linear-to-t from-black/80 to-black/10"></div>
              <img
                src={caseStudy.logo}
                alt={caseStudy.logoAlt}
                className={caseStudy.logoClassName}
              />
              <h2 className="isolate max-w-sm text-start text-lg font-semibold text-white lg:text-xl lg:font-semibold">
                {caseStudy.title}
              </h2>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export { CaseStudies1 };