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">سال‌ها تجربه و تخصص</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 };