import { Box, Globe, Rocket, ShieldUser, User, Users } from "lucide-react";

import { Safari } from "@/components/magicui/safari";
import { cn } from "@/lib/utils";

const FEATURES = [
  {
    id: "repository",
    title: "ردیابی UTM",
    icon: Globe,
  },
  {
    id: "contributors",
    title: "گزارش ROI",
    icon: User,
  },
  {
    id: "archives",
    title: "مدیریت کمپین",
    icon: Box,
  },
  {
    id: "destinations",
    title: "سگمنت‌بندی مخاطب",
    icon: Rocket,
  },
  {
    id: "authorization",
    title: "تحلیل کانال",
    icon: ShieldUser,
  },
  {
    id: "partnership",
    title: "اتوماسیون ایمیل",
    icon: Users,
  },
] as const;

interface Feature299Props {
  className?: string;
}

const Feature299 = ({ className }: Feature299Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container flex flex-col gap-10 md:gap-16">
        <p className="mx-auto max-w-5xl text-center text-xl text-pretty md:text-xl">
          با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
        </p>
        <ul className="mx-auto grid grid-cols-1 gap-x-10 gap-y-4 text-start md:grid-cols-2">
          {FEATURES.map((feature) => {
            const Icon = feature.icon;
            return (
              <li key={feature.id} className="flex gap-2">
                <Icon className="mt-1 size-4 shrink-0" />
                <h3 className="text-pretty">{feature.title}</h3>
              </li>
            );
          })}
        </ul>
        <div className="mx-auto w-full max-w-5xl">
          <Safari
            url="https://www.ShadcnBlocks"
            mode="simple"
            imageSrc="/block-media/shadcnblocks/block/dashboard/dashboard-1.png"
          />
        </div>
      </div>
    </section>
  );
};

export { Feature299 };