import type { LucideIcon } from "lucide-react";
import {
  Building2,
  CircleDot,
  Compass,
  Home,
  Landmark,
  LayoutGrid,
} from "lucide-react";

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

type CardItem = {
  id: string;
  title: string;
  description: string;
  image: string;
  imageAlt: string;
  icon: LucideIcon;
  wide?: boolean;
};

const CARDS: CardItem[] = [
  {
    id: "sustainable-design",
    title: "تحلیل کانال",
    description:
      "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
    image:
      "/block-media/external/unsplash/photo-1647517649469-ba454dc72896.jpg",
    imageAlt: "تحلیل عملکرد کمپین",
    icon: Building2,
    wide: true,
  },
  {
    id: "urban-planning",
    title: "اتوماسیون ایمیل",
    description:
      "مسیرهای ایمیل را بدون کدنویسی برای هر سگمنت طراحی کنید.",
    image:
      "/block-media/external/unsplash/photo-1698516923132-b0236bc8f3ef.jpg",
    imageAlt: "نمودار ROI",
    icon: Landmark,
  },
  {
    id: "digital-integration",
    title: "A/B تست",
    description:
      "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
    image:
      "/block-media/external/unsplash/photo-1586869871566-d8e41dd50318.jpg",
    imageAlt: "داشبورد بازاریابی دیجیتال",
    icon: LayoutGrid,
  },
  {
    id: "bim-solutions",
    title: "تقویم محتوا",
    description:
      "چند کانال را همزمان اجرا کنید و عملکرد هر کمپین را در یک نما مقایسه کنید.",
    image:
      "/block-media/external/unsplash/photo-1588742415209-69dbb64791b6.jpg",
    imageAlt: "تحلیل عملکرد کمپین",
    icon: Compass,
    wide: true,
  },
  {
    id: "heritage-preservation",
    title: "ردیابی UTM",
    description:
      "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
    image:
      "/block-media/external/unsplash/photo-1587278163304-99d65f6a58f0.jpg",
    imageAlt: "نمودار ROI",
    icon: Home,
    wide: true,
  },
  {
    id: "interior-innovation",
    title: "گزارش ROI",
    description:
      "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
    image:
      "/block-media/external/unsplash/photo-1589100787575-fad1dcaa9d17.jpg",
    imageAlt: "داشبورد بازاریابی دیجیتال",
    icon: CircleDot,
  },
];

interface Feature202Props {
  className?: string;
}

const Feature202 = ({ className }: Feature202Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto max-w-3xl text-center">
          <div className="text-xs text-muted-foreground md:text-sm">کمپین</div>
          <h2 className="mt-4 mb-8 text-xl font-semibold text-balance md:text-2xll">
            رشد برند
          </h2>
          <p className="text-base text-pretty text-muted-foreground md:text-lg">
            کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
          </p>
        </div>
        <div className="mt-8 grid gap-4 lg:grid-cols-3">
          {CARDS.map((card) => {
            const Icon = card.icon;

            return (
              <a
                key={card.id}
                href="#"
                className={cn(
                  "group relative isolate h-80 overflow-hidden rounded-2xl border border-border transition-transform duration-300 hover:-translate-y-0.5",
                  card.wide && "lg:col-span-2",
                )}
              >
                <div className="absolute inset-0 -z-10 bg-linear-to-t from-primary to-transparent" />
                <img
                  src={card.image}
                  alt={card.imageAlt}
                  className="absolute inset-0 -z-20 size-full rounded-2xl object-cover grayscale-100 transition-all duration-300 group-hover:grayscale-50"
                />
                <div className="flex h-full flex-col justify-between p-10">
                  <span className="flex size-12 items-center justify-center rounded-xl border border-background/20 bg-background/15 backdrop-blur-sm">
                    <Icon
                      className="size-5 text-background"
                      strokeWidth={1.5}
                    />
                  </span>
                  <div className="text-start">
                    <h3 className="font-medium text-background">{card.title}</h3>
                    <p className="mt-2 text-pretty text-background/70">
                      {card.description}
                    </p>
                  </div>
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
};

export { Feature202 };