import { ArrowRight } from "lucide-react";

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

const RESOURCES = [
  {
    title: "ردیابی UTM",
    description:
      "چند کانال را همزمان اجرا کنید و عملکرد هر کمپین را در یک نما مقایسه کنید.",
    href: "#",
    imageSrc: "/block-media/shadcnblocks/block/placeholder-8-wide.svg",
    imageAlt: "تحلیل عملکرد کمپین",
  },
  {
    title: "گزارش ROI",
    description:
      "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
    href: "#",
    imageSrc: "/block-media/shadcnblocks/block/placeholder-8-wide.svg",
    imageAlt: "نمودار ROI",
  },
  {
    title: "مدیریت کمپین",
    description:
      "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
    href: "#",
    imageSrc: "/block-media/shadcnblocks/block/placeholder-8-wide.svg",
    imageAlt: "داشبورد بازاریابی دیجیتال",
  },
];

interface Feature188Props {
  className?: string;
}

const Feature188 = ({ className }: Feature188Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <h2 className="text-center text-xl font-medium text-balance sm:text-2xll lg:text-2xll">
          کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
        </h2>

        <div className="mx-auto mt-12 max-w-5xl rounded-2xl border">
          {RESOURCES.map((resource, index) => (
            <div
              key={resource.title}
              className={cn(index !== RESOURCES.length - 1 && "border-b")}
            >
              <a
                href={resource.href}
                className="flex flex-col p-4 md:flex-row md:items-center md:justify-between lg:p-6"
              >
                <div className="flex items-center">
                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-muted p-2 lg:h-14 lg:w-14">
                    <ArrowRight className="h-6 w-6 text-muted-foreground rtl:rotate-180" />
                  </div>
                  <div className="ms-6 text-start">
                    <h3 className="text-lg font-semibold lg:text-xl">
                      {resource.title}
                    </h3>
                    <p className="text-sm text-pretty text-muted-foreground lg:text-lg">
                      {resource.description}
                    </p>
                  </div>
                </div>

                <div className="mt-4 shrink-0 md:mt-0 md:w-60">
                  <div className="aspect-w-16 aspect-h-9 rounded-lg bg-muted">
                    <img
                      src={resource.imageSrc}
                      alt={resource.imageAlt}
                      className="h-full w-full rounded-md object-cover"
                    />
                  </div>
                </div>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature188 };