import { Code, GitBranch, List, Sparkles } from "lucide-react";

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

const integrations = [
  {
    icon: <Code className="h-5 w-5" />,
    title: "ردیابی UTM",
    text: "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
  },
  {
    icon: <GitBranch className="h-5 w-5" />,
    title: "گزارش ROI",
    text: "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
  },
  {
    icon: <List className="h-5 w-5" />,
    title: "مدیریت کمپین",
    text: "مسیرهای ایمیل را بدون کدنویسی برای هر سگمنت طراحی کنید.",
  },
  {
    icon: <Sparkles className="h-5 w-5" />,
    title: "سگمنت‌بندی مخاطب",
    text: "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
  },
];

interface Feature159Props {
  className?: string;
}

const Feature159 = ({ className }: Feature159Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-wrap items-start justify-between border-b pb-16">
          {integrations.map((item, index, arr) => (
            <div
              key={item.title}
              className="flex shrink grow basis-full flex-col items-start justify-between p-6 text-start md:basis-1/2 lg:basis-1/4"
            >
              <div className="mb-3 flex items-center justify-start gap-3">
                {item.icon}
                <h2 className="text-lg font-semibold">{item.title}</h2>
              </div>
              <p className="text-sm text-pretty text-muted-foreground/50">
                {item.text}
              </p>
              {arr.length - 1 === index && (
                <div className="mt-5 w-auto cursor-pointer self-start border-b text-sm">
                  مشاهده همه
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature159 };