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

interface About2Props {
  className?: string;
}

const About2 = ({ className }: About2Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="flex flex-col gap-28">
        <div className="container flex flex-col gap-10 text-center md:gap-24">
          <div className="mx-auto flex max-w-3xl flex-col gap-6">
            <h1 className="text-xl font-medium md:text-2xll">درباره فروش‌یار</h1>
            <p className="text-lg text-muted-foreground md:text-xl">
            فروش‌یار عملکرد تیم فروش را با داشبوردهای زنده، پیش‌بینی درآمد و گزارش قیف تبدیل شفاف می‌کند.
            </p>
          </div>
          <div className="grid gap-6 md:grid-cols-12">
            <img
              src="/block-media/shadcnblocks/block/placeholder-1.svg"
              alt="placeholder"
              className="size-full max-h-96 rounded-xl object-cover md:col-span-5"
            />
            <img
              src="/block-media/shadcnblocks/block/placeholder-2.svg"
              alt="placeholder"
              className="size-full max-h-96 rounded-xl object-cover md:col-span-4"
            />
            <img
              src="/block-media/shadcnblocks/block/placeholder-3.svg"
              alt="placeholder"
              className="size-full max-h-96 rounded-xl object-cover md:col-span-3"
            />
          </div>
        </div>
        <div className="container flex flex-col gap-16">
          <h2 className="max-w-3xl text-xl font-medium md:text-2xll">
          دادهٔ فروش وقتی ارزشمند است که تصمیم بعدی را روشن کند.
          </h2>
          <div className="grid grid-cols-2 gap-6 md:grid-cols-3">
            <div className="flex flex-col gap-6 border-b pb-8">
              <p className="text-xl font-medium md:text-2xll">21M</p>
              <p className="text-muted-foreground">نمایندگان متصل روزانه</p>
            </div>
            <div className="flex flex-col gap-6 border-b pb-8">
              <p className="text-xl font-medium md:text-2xll">12+</p>
              <p className="text-muted-foreground">سال تجربه در فروش B2B</p>
            </div>
            <div className="flex flex-col gap-6 border-b pb-8">
              <p className="text-xl font-medium md:text-2xll">654</p>
              <p className="text-muted-foreground">گزارش‌های سفارشی فعال</p>
            </div>
            <div className="flex flex-col gap-6 border-b pb-8">
              <p className="text-xl font-medium md:text-2xll">113k+</p>
              <p className="text-muted-foreground">نمایندگان متصل روزانه</p>
            </div>
            <div className="flex flex-col gap-6 border-b pb-8">
              <p className="text-xl font-medium md:text-2xll">461k</p>
              <p className="text-muted-foreground">حساب سازمانی فعال</p>
            </div>
            <div className="flex flex-col gap-6 border-b pb-8">
              <p className="text-xl font-medium md:text-2xll">98+</p>
              <p className="text-muted-foreground">بازارهای پوشش‌داده‌شده</p>
            </div>
          </div>
        </div>
        <div className="bg-muted/50 py-24">
          <div className="container flex flex-col items-center gap-11">
            <p className="text-center text-xl font-medium">
            مورد اعتماد تیم‌های فروش و درآمد در سازمان‌های پیشرو.
            </p>
            <div className="grid grid-cols-2 gap-x-7 gap-y-12 lg:grid-cols-4">
              <div className="flex items-center gap-3">
                <img
                  src="/block-media/shadcnblocks/block/block-1.svg"
                  alt="logo"
                  className="h-8 w-auto md:h-14"
                />
                <p className="text-xl font-semibold md:text-xl">فروش‌یار</p>
              </div>
              <div className="flex items-center gap-3">
                <img
                  src="/block-media/shadcnblocks/block/block-2.svg"
                  alt="logo"
                  className="h-8 w-auto md:h-14"
                />
                <p className="text-xl font-semibold md:text-xl">Creative</p>
              </div>
              <div className="flex items-center gap-3">
                <img
                  src="/block-media/shadcnblocks/block/block-3.svg"
                  alt="logo"
                  className="h-8 w-auto md:h-14"
                />
                <p className="text-xl font-semibold md:text-xl">Octan</p>
              </div>
              <div className="flex items-center gap-3">
                <img
                  src="/block-media/shadcnblocks/block/block-4.svg"
                  alt="logo"
                  className="h-8 w-auto md:h-14"
                />
                <p className="text-xl font-semibold md:text-xl">Newco</p>
              </div>
              <div className="flex items-center gap-3">
                <img
                  src="/block-media/shadcnblocks/block/block-5.svg"
                  alt="logo"
                  className="h-8 w-auto md:h-14"
                />
                <p className="text-xl font-semibold md:text-xl">فروش‌یار</p>
              </div>
              <div className="flex items-center gap-3">
                <img
                  src="/block-media/shadcnblocks/block/block-6.svg"
                  alt="logo"
                  className="h-8 w-auto md:h-14"
                />
                <p className="text-xl font-semibold md:text-xl">Fabrikam</p>
              </div>
              <div className="flex items-center gap-3">
                <img
                  src="/block-media/shadcnblocks/block/block-1.svg"
                  alt="logo"
                  className="h-8 w-auto md:h-14"
                />
                <p className="text-xl font-semibold md:text-xl">فروش‌یار</p>
              </div>
              <div className="flex items-center gap-3">
                <img
                  src="/block-media/shadcnblocks/block/block-2.svg"
                  alt="logo"
                  className="h-8 w-auto md:h-14"
                />
                <p className="text-xl font-semibold md:text-xl">فروش‌یار</p>
              </div>
            </div>
          </div>
        </div>
        <div className="container flex flex-col items-center gap-14">
          <h2 className="text-center text-xl font-semibold md:text-2xll">
            نتایج واقعی تیم‌هایی که با فروش‌یار کار می‌کنند
                                </h2>
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            <div className="grid grid-cols-1 gap-6 md:col-span-2 md:grid-cols-2 md:flex-row lg:col-span-1 lg:grid-cols-1 lg:flex-col">
              <img
                src="/block-media/shadcnblocks/block/placeholder-2.svg"
                alt="placeholder"
                className="max-h-96 w-full rounded-xl object-cover"
              />
              <div className="flex flex-col justify-center rounded-xl bg-muted p-8">
                <p className="mb-2 text-xl font-medium">21M</p>
                <p className="mb-6 font-semibold">فرصت‌های ردیابی‌شده</p>
                <p className="text-muted-foreground">
                زمان تهیه گزارش هفتگی را تا ۸۰٪ کاهش دهید و روی کوچینگ فروش تمرکز کنید.
                </p>
              </div>
            </div>
            <div className="relative">
              <img
                src="/block-media/shadcnblocks/block/placeholder-1.svg"
                alt="placeholder"
                className="h-full rounded-xl object-cover"
              />
              <div className="absolute right-6 bottom-6 left-6 rounded-xl bg-background p-4">
                <div className="mb-4 flex items-center gap-2">
                  <img
                    src="/block-media/shadcnblocks/block/block-1.svg"
                    alt="placeholder"
                    className="h-7 w-auto"
                  />
                  <span className="text-lg font-semibold">فروش‌یار</span>
                </div>
                <p className="mb-6 text-sm">
                پیش‌بینی درآمد فروش‌یار به ما کمک کرد انحراف بودجه فروش را زیر ۵٪ نگه داریم.
                                                  </p>
                <div className="flex items-baseline gap-1">
                  <span className="font-medium">علی رضایی,</span>
                  <span className="text-sm text-muted-foreground">
                    مدیر درآمد فروش‌یار
                  </span>
                </div>
              </div>
            </div>
            <div className="flex flex-col gap-6">
              <div className="rounded-xl bg-muted p-8">
                <p className="mb-2 text-xl font-medium">97%</p>
                <p className="mb-6 font-semibold">دقت پیش‌بینی</p>
                <p className="text-muted-foreground">
                مدل پیش‌بینی فروش‌یار دقت برنامه‌ریزی فصلی را به‌طور معناداری بالا می‌برد.
                </p>
              </div>
              <img
                src="/block-media/shadcnblocks/block/placeholder-3.svg"
                alt="placeholder"
                className="max-h-96 rounded-xl object-cover"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { About2 };