import React from "react";

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

const stats = [
  {
    number: "80K+",
    description:
      "بیش از ۸۰ هزار نماینده فروش روی فرصت‌جو کار می‌کنند؛ از ثبت لید تا پیش‌بینی فصلی درآمد.",
  },
  {
    number: "20+",
    description:
      "بیش از ۲۰ تیم درآمد سازمانی با فرصت‌جو پایپ‌لاین خود را شفاف و قابل پیش‌بینی کرده‌اند.",
  },
  {
    number: "95%",
    description:
      "نرخ رضایت مشتری از تیم‌هایی که با پشتیبانی اختصاصی و گزارش‌های درآمدی دقیق کار می‌کنند.",
  },
];

interface About16Props {
  className?: string;
}

const About16 = ({ className }: About16Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="grid grid-cols-1 gap-20 lg:grid-cols-6">
          <div className="top-10 col-span-2 flex h-fit w-fit items-center gap-3 lg:sticky">
            <span className="size-2 bg-orange-500" />
            <p className="text-foreground/30 uppercase">چرا فرصت‌جو؟</p>
          </div>
          <div className="col-span-4 ml-auto max-w-3xl space-y-10">
            <h1 className="text-3xl font-medium tracking-tight lg:text-xl">
              «فرصت‌جو CRM فروش برای تیم‌های B2B است. پایپ‌لاین، فعالیت‌ها و پیش‌بینی درآمد را شفاف می‌کنیم تا مدیران روی کوچینگ تمرکز کنند، نه اکسل.»
            </h1>

            <p className="text-lg text-foreground/40">
              می‌پرسیم: هدف فصلی چیست؟ مخاطب تصمیم‌گیر کیست؟ چه مرحله‌ای مانع بستن معامله است؟
              <br className="hidden lg:block" />
              از همین سه پرسش، قیف فروش را بهینه می‌کنیم.
            </p>

            <img
              src="/block-media/shadcnblocks/block/guri4/img11.png"
              alt=""
              className="pointer-events-none h-110 w-full object-cover"
            />
            <ul className="mt-14">
              {stats.map((stat, index) => (
                <li key={index} className="grid grid-cols-5 border-b py-8">
                  <h3 className="col-span-2 text-xl font-medium">
                    {stat.number}
                  </h3>
                  <p className="col-span-3">{stat.description}</p>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};

export { About16 };