import {
  Bolt,
  Building,
  Cloud,
  MessagesSquare,
  Rocket,
  Star,
} from "lucide-react";

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

const features = [
  {
    id: "feature-1",
    title: "تقسیم خودکار سرنخ",
    description:
      "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
    icon: Cloud,
  },
  {
    id: "feature-2",
    title: "گزارش عملکرد فروش",
    description:
      "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
    icon: Star,
  },
  {
    id: "feature-3",
    title: "مدیریت قرارداد",
    description:
      "بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
    icon: Bolt,
  },
  {
    id: "feature-4",
    title: "تاریخچه تعاملات",
    description:
      "پیگیری‌های از قلم افتاده را قبل از سرد شدن سرنخ به‌موقع یادآوری کنید.",
    icon: MessagesSquare,
  },
  {
    id: "feature-5",
    title: "پروفایل ۳۶۰ درجه مشتری",
    description:
      "سرنخ‌ها را بر اساس منطقه، اندازه یا صنعت به نماینده مناسب اختصاص دهید.",
    icon: Rocket,
  },
  {
    id: "feature-6",
    title: "اتوماسیون مراحل فروش",
    description:
      "عملکرد هر نماینده و نرخ تبدیل هر مرحله را در یک داشبورد مقایسه کنید.",
    icon: Building,
  },
];

interface Feature67Props {
  className?: string;
}

const Feature67 = ({ className }: Feature67Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container flex flex-col items-start gap-8 lg:gap-12 lg:px-16 xl:flex-row xl:gap-32">
        <h3 className="text-3xl font-semibold md:shrink-0 md:text-xl lg:max-w-1/3 lg:max-w-3xl lg:text-2xll">
          پیش‌بینی درآمد
        </h3>
        <div className="grid w-full gap-6 md:grid-cols-2">
          {features.map((feature) => (
            <div
              key={feature.id}
              className="flex rounded-lg border border-border bg-accent p-6 md:p-8"
            >
              <feature.icon className="ms-3 size-5 shrink-0 lg:ms-6 lg:size-6" />
              <div>
                <div className="mb-3 h-5 text-sm font-semibold text-accent-foreground md:text-base">
                  {feature.title}
                </div>
                <div className="text-sm font-medium text-muted-foreground md:text-base">
                  {feature.description}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature67 };