import type { LucideIcon } from "lucide-react";
import {
  Code,
  GitBranch,
  List,
  Play,
  Sparkles,
  WandSparkles,
} from "lucide-react";

import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
} from "@/components/ui/card";
import { cn } from "@/lib/utils";

const cards: {
  icon: LucideIcon;
  title: string;
  description: string;
  imageAlt: string;
}[] = [
  {
    icon: Code,
    title: "ردیابی UTM",
    description: "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
    imageAlt: "تحلیل عملکرد کمپین",
  },
  {
    icon: Play,
    title: "گزارش ROI",
    description: "مسیرهای ایمیل را بدون کدنویسی برای هر سگمنت طراحی کنید.",
    imageAlt: "نمودار ROI",
  },
  {
    icon: GitBranch,
    title: "مدیریت کمپین",
    description: "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
    imageAlt: "داشبورد بازاریابی دیجیتال",
  },
  {
    icon: List,
    title: "سگمنت‌بندی مخاطب",
    description: "چند کانال را همزمان اجرا کنید و عملکرد هر کمپین را در یک نما مقایسه کنید.",
    imageAlt: "تحلیل عملکرد کمپین",
  },
  {
    icon: WandSparkles,
    title: "تحلیل کانال",
    description: "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
    imageAlt: "نمودار ROI",
  },
  {
    icon: Sparkles,
    title: "اتوماسیون ایمیل",
    description: "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
    imageAlt: "داشبورد بازاریابی دیجیتال",
  },
];

interface Feature3Props {
  className?: string;
}

const Feature3 = ({ className }: Feature3Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-5xl flex-col items-center gap-6 text-center">
          <h1 className="mb-6 text-xl font-semibold text-pretty lg:text-2xll">
            کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
          </h1>

          <div className="mt-10 grid grid-cols-1 place-items-center gap-8 sm:grid-cols-2 lg:grid-cols-3">
            {cards.map(({ icon: Icon, title, description, imageAlt }) => (
              <Card key={title}>
                <CardHeader className="pb-1">
                  <Icon className="size-4" strokeWidth={1} />
                </CardHeader>
                <CardContent className="text-start">
                  <h2 className="mb-1 text-lg font-semibold">{title}</h2>
                  <p className="leading-snug text-muted-foreground">
                    {description}
                  </p>
                </CardContent>
                <CardFooter className="justify-end pe-0 pb-0">
                  <img
                    className="h-40 w-full rounded-ts-md object-cover object-center"
                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
                    alt={imageAlt}
                  />
                </CardFooter>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature3 };