import { EvervaultCard } from "@/components/aceternity/evervault-card";
import { cn } from "@/lib/utils";

const SECURITY_FEATURES = [
  { id: "keys", label: "تیم فروش" },
  { id: "e2e", label: "بستن معامله" },
  { id: "zero-knowledge", label: "رشد درآمد" },
] as const;

interface Feature282Props {
  className?: string;
}

const Feature282 = ({ className }: Feature282Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("relative w-full overflow-hidden py-32", className)}
    >
      <div className="container grid h-full w-full min-w-0 grid-cols-1 gap-12 md:grid-cols-2">
        <div className="min-w-0">
          <div className="mx-auto flex h-full w-full min-w-0 flex-col gap-4 overflow-hidden rounded-lg border border-primary/20 bg-primary p-4 md:max-w-sm">
            <div className="h-full w-full min-w-0 overflow-hidden rounded-md border border-border/50 bg-background p-4">
              <EvervaultCard
                text="یادآور پیگیری خودکار"
                className="w-full max-w-full text-center text-xl font-medium tracking-tight text-balance"
              />
            </div>
            <div className="min-w-0 space-y-2 p-4 text-start">
              <p className="font-mono text-sm text-balance text-muted-foreground">
                با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.
              </p>
              <p className="text-lg font-semibold text-balance text-primary-foreground">
                چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.
              </p>
            </div>
          </div>
        </div>
        <div className="min-w-0 text-start">
          <p className="mb-2 font-mono text-sm text-balance text-muted-foreground">
            الگوهای موفق فروش را در کل سازمان تکرار کنید. داده لحظه‌ای نشان می‌دهد کدام مرحله بیشترین افت تبدیل را دارد.
          </p>
          <h2 className="text-3xl font-semibold tracking-tight text-balance md:max-w-lg">
            پیش‌بینی درآمد را دقیق‌تر کنید
          </h2>
          <p className="mt-6 leading-relaxed text-pretty text-muted-foreground md:max-w-lg">
            با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.
          </p>
          <p className="mt-4 leading-relaxed text-pretty text-muted-foreground md:max-w-lg">
            چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.
          </p>
          <ul className="mt-8 space-y-3">
            {SECURITY_FEATURES.map((feature) => (
              <li key={feature.id} className="flex min-w-0 items-center gap-3">
                <div className="size-2 shrink-0 rounded-full bg-primary" />
                <span className="font-mono text-sm text-muted-foreground">
                  {feature.label}
                </span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
};

export { Feature282 };