import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

interface Feature27Props {
  className?: string;
}

const Feature27 = ({ className }: Feature27Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-3xl flex-col items-center gap-6">
          <Badge variant="outline">کمپین</Badge>
          <h2 className="mb-2 text-center text-3xl font-semibold lg:text-xl">
            کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
          </h2>
          <p className="text-center text-muted-foreground lg:text-lg">
            با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
          </p>
        </div>
        <div className="mt-20 grid gap-10 md:grid-cols-2">
          <div>
            <img
              src="/block-media/shadcnblocks/block/placeholder-1.svg"
              alt="تحلیل عملکرد کمپین"
              className="rounded-lg border"
            />
            <div className="px-4 pt-10">
              <h3 className="font-medium">ردیابی UTM</h3>
              <p className="text-muted-foreground">
                گزارش ROI
              </p>
            </div>
          </div>
          <div>
            <img
              src="/block-media/shadcnblocks/block/placeholder-2.svg"
              alt="نمودار ROI"
              className="rounded-lg border"
            />
            <div className="px-4 pt-10">
              <h3 className="font-medium">مدیریت کمپین</h3>
              <p className="text-muted-foreground">
                سگمنت‌بندی مخاطب
              </p>
            </div>
          </div>
          <div className="md:col-span-2">
            <img
              src="/block-media/shadcnblocks/block/placeholder-3.svg"
              alt="داشبورد بازاریابی دیجیتال"
              className="aspect-video max-h-[480px] w-full rounded-lg border bg-muted"
            />
            <div className="px-4 pt-10">
              <h3 className="font-medium">تحلیل کانال</h3>
              <p className="text-muted-foreground">
                اتوماسیون ایمیل
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature27 };