import { ArrowRight, Heart, Lightbulb, Shield, UserPen } from "lucide-react";

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

const values = [
  {
    title: "تقسیم خودکار سرنخ",
    description:
      "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
    icon: UserPen,
  },
  {
    title: "گزارش عملکرد فروش",
    description:
      "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
    icon: Lightbulb,
  },
  {
    title: "مدیریت قرارداد",
    description:
      "بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
    icon: Shield,
  },
];

interface Feature170Props {
  className?: string;
}

const Feature170 = ({ className }: Feature170Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col gap-6 py-4 text-start lg:py-8">
          <Badge
            variant="outline"
            className="w-fit gap-1 bg-card px-3 text-sm font-normal tracking-tight shadow-sm"
          >
            <Heart className="size-4" />
            <span>مدیریت فروش</span>
          </Badge>
          <h2 className="text-3xl leading-tight tracking-tight text-balance md:text-xl lg:text-2xll">
            هر سرنخ را تا قرارداد دنبال کنید
          </h2>
          <div className="flex flex-col gap-2">
            <p className="text-pretty text-muted-foreground">
              تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.
            </p>
            <p className="inline-flex items-center gap-1 text-primary">
              <span className="underline">بیشتر بدانید</span>
              <ArrowRight className="size-4 rtl:rotate-180" />
            </p>
          </div>
        </div>

        <div className="mt-10 grid gap-8 sm:grid-cols-2 md:mt-14 lg:grid-cols-3">
          {values.map((value) => (
            <div className="flex gap-2.5 text-start" key={value.title}>
              <value.icon className="mt-0.5 size-[18px] shrink-0" />
              <div>
                <h3 className="text-lg leading-none! tracking-[-0.96px] lg:text-xl">
                  {value.title}
                </h3>
                <p className="mt-2.5 text-sm tracking-[-0.36px] text-pretty text-muted-foreground">
                  {value.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature170 };