"use client";

import { Code, MessageCircle, Text } from "lucide-react";

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

interface Feature133Props {
  className?: string;
}

const Feature133 = ({ className }: Feature133Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("container py-32", className)}>
      <h2 className="text-start text-xl font-semibold md:text-xl">
        کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
      </h2>

      <div className="mt-12 flex flex-col gap-6 md:flex-row">
        <div className="flex w-full flex-col justify-between overflow-hidden rounded-2xl border bg-card px-12 pt-12 text-card-foreground shadow-sm">
          <div className="mb-12 flex flex-col gap-3 text-start">
            <Code className="size-6" />
            <h4 className="text-xl font-semibold">ردیابی UTM</h4>
            <p className="text-base font-normal text-muted-foreground">
              گزارش ROI
            </p>
          </div>
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="تحلیل عملکرد کمپین"
            className="max-h-52 w-full rounded-ts-md object-cover shadow-lg"
          />
        </div>
        <div className="flex w-full flex-col gap-6">
          <div className="w-full overflow-hidden rounded-2xl border bg-card text-card-foreground shadow-sm">
            <div className="flex flex-col gap-3 p-12 text-start">
              <Text className="size-6" />
              <h4 className="text-xl font-semibold">
                {(100).toLocaleString("fa-IR")}٪ قابل سفارشی‌سازی
              </h4>
              <p className="text-base font-normal text-muted-foreground">
                مدیریت کمپین
              </p>
            </div>
          </div>

          <div className="flex w-full flex-col items-center justify-center gap-6 overflow-hidden rounded-2xl border bg-card text-card-foreground shadow-sm md:flex-row">
            <div className="flex w-full flex-col p-12 text-start md:gap-3">
              <MessageCircle className="size-6" />
              <h4 className="text-xl font-semibold">سگمنت‌بندی مخاطب</h4>
              <p className="text-base font-normal text-muted-foreground">
                تحلیل کانال
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature133 };