import {
  Infinity as InfinityIcon,
  MessagesSquare,
  Zap,
  ZoomIn,
} from "lucide-react";

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

const feature = [
  {
    title: "تحلیل کانال",
    description:
      "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
    icon: <ZoomIn className="size-6" />,
  },
  {
    title: "اتوماسیون ایمیل",
    description:
      "چند کانال را همزمان اجرا کنید و عملکرد هر کمپین را در یک نما مقایسه کنید.",
    icon: <Zap className="size-6" />,
  },
  {
    title: "A/B تست",
    description:
      "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
    icon: <MessagesSquare className="size-6" />,
  },
  {
    title: "تقویم محتوا",
    description:
      "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
    icon: <InfinityIcon className="size-6" />,
  },
];

interface Feature15Props {
  className?: string;
}

const Feature15 = ({ className }: Feature15Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex w-full flex-col items-center">
          <div className="flex flex-col items-center space-y-4 text-center sm:space-y-6 md:max-w-3xl md:text-center">
            <p className="text-sm text-muted-foreground">با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.</p>
            <h2 className="text-3xl font-medium md:text-2xll">
              کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
            </h2>

            <p className="text-muted-foreground md:max-w-2xl">
              بازاریابی را با داده هدایت کنید
            </p>
          </div>
        </div>
        <div className="mx-auto mt-20 grid max-w-5xl gap-6 md:grid-cols-2">
          {feature.map((item, idx) => (
            <div
              className="flex flex-col justify-between rounded-lg bg-accent p-6 md:min-h-[300px] md:p-8"
              key={idx}
            >
              <span className="mb-6 flex size-11 items-center justify-center rounded-full bg-background">
                {item.icon}
              </span>
              <div>
                <h3 className="text-lg font-medium md:text-xl">
                  {item.title}
                </h3>
                <p className="mt-2 text-muted-foreground">
                  {item.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature15 };