import { Globe, Hash, NotebookText } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

const highlights = [
  {
    icon: NotebookText,
    text: "یادآور پیگیری خودکار",
  },
  {
    icon: Globe,
    text: "پیش‌بینی درآمد ماهانه",
  },
  {
    icon: Hash,
    text: "مقایسه عملکرد نمایندگان",
  },
];

interface Feature38Props {
  className?: string;
}

const Feature38 = ({ className }: Feature38Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col-reverse items-center justify-between gap-10 lg:flex-row">
          <div className="lg:max-w-md">
            <span className="flex size-14 items-center justify-center rounded-full bg-accent">
              <NotebookText className="size-6 text-primary" />
            </span>
            <h1 className="mt-8 mb-2 text-xl font-bold text-pretty lg:text-xl">
              پیش‌بینی درآمد را دقیق‌تر کنید
            </h1>
            <p className="mb-5 text-muted-foreground">
              هر فرصت فروش را از دست ندهید
            </p>
            <Button>شروع رایگان</Button>
            <Separator className="my-7" />
            <ul className="space-y-4">
              {highlights.map(({ icon: Icon, text }) => (
                <li key={text} className="flex items-center gap-3">
                  <Icon className="size-5 shrink-0 text-primary" />
                  <p className="font-bold">{text}</p>
                </li>
              ))}
            </ul>
          </div>
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="صف اولویت سرنخ‌ها"
            className="max-h-96 w-full rounded-md object-cover lg:max-h-none lg:w-1/2"
          />
        </div>
      </div>
    </section>
  );
};

export { Feature38 };