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

interface About5Props {
  className?: string;
}

const About5 = ({ className }: About5Props) => {
  return (
    <section className={cn("bg-muted py-32 dark:bg-background", className)}>
      <div className="container">
        <div className="grid gap-14 pb-32 md:grid-cols-2">
          <div>
            <p className="text-sm font-medium">درباره ما</p>
            <h1 className="mt-4 text-3xl font-medium md:text-xl">
              اتوماسیون گردش‌کار فروش و عملیات؛ بدون کدنویسی پیچیده
            </h1>
          </div>
          <p className="md:text-lg">
            جریان‌کار به تیم‌های عملیات و فروش اجازه می‌دهد تأییدها، اعلان‌ها و همگام‌سازی بین سامانه مدیریت ارتباط با مشتری و ابزارها را خودکار کنند و خطاهای دستی را حذف کنند.
                                </p>
        </div>
        <img
          src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
          alt="placeholder"
          className="ml-auto aspect-video max-h-[550px] rounded-xl object-cover"
        />
        <p className="mt-6 text-center text-xl lg:text-end">
          متعهد به حذف کارهای تکراری از عملیات فروش
        </p>
        <div className="flex flex-col justify-between gap-14 py-40 lg:flex-row">
          <p className="mx-auto max-w-xl text-center text-xl lg:mx-0 lg:text-start">
            ما تیمی از متخصصان عملیات، محصول و اتوماسیون هستیم که گردش‌کارهای درآمد را ساده‌تر می‌کنیم.
          </p>
          <div className="grid shrink-0 grid-cols-2 items-center gap-6 md:grid-cols-4">
            <img
              src="/block-media/shadcnblocks/block/logos/vercel-wordmark.svg"
              alt="logo"
              className="mx-auto max-h-6 md:mx-0 dark:invert"
            />
            <img
              src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
              alt="logo"
              className="mx-auto max-h-9 md:mx-0 dark:invert"
            />
            <img
              src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-light.svg"
              alt="logo"
              className="mx-auto max-h-7 md:mx-0 md:max-h-9 dark:hidden"
            />
            <img
              src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-dark.svg"
              alt="logo"
              className="mx-auto hidden max-h-7 md:mx-0 md:max-h-9 dark:block"
            />
            <img
              src="/block-media/shadcnblocks/block/logos/supabase-wordmark.svg"
              alt="logo"
              className="mx-auto max-h-9 md:mx-0 dark:hidden"
            />
            <img
              src="/block-media/shadcnblocks/block/logos/supabase-wordmark-dark.svg"
              alt="logo"
              className="mx-auto hidden max-h-9 md:mx-0 dark:block"
            />
          </div>
        </div>
        <div className="grid gap-14 lg:grid-cols-4 xl:grid-cols-5">
          <div className="md:col-span-2 xl:col-span-3">
            <h2 className="mb-10 text-xl font-medium">مأموریت ما</h2>
            <p className="text-lg">
              تیم‌های درآمد زمان زیادی را صرف کپی داده بین ابزارها، یادآوری دستی و پیگیری تأیید می‌کنند.
              جریان‌کار این اصطکاک را با تریگرها، شرط‌ها و اکشن‌های ازپیش‌ساخته حذف می‌کند.
              <br />
              <br />
              مأموریت ما این است که عملیات فروش و بازاریابی مثل یک سیستم واحد کار کند؛ سریع، قابل ممیزی و مقیاس‌پذیر.
            </p>
            <div className="mt-6 grid grid-cols-2 gap-6 text-center">
              <div className="flex flex-col items-center justify-center gap-2 rounded-xl border bg-background bg-card p-6">
                <span className="text-xl md:text-xl">2024</span>
                <span className="text-sm text-muted-foreground md:text-lg">
                  سال راه‌اندازی
                </span>
              </div>
              <div className="flex flex-col items-center justify-center gap-2 rounded-xl border bg-background bg-card p-6">
                <span className="text-xl md:text-xl">$2.2M</span>
                <span className="text-sm text-muted-foreground md:text-lg">
                  سرمایه‌گذاری اولیه
                                                  </span>
              </div>
            </div>
          </div>
          <img
            src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
            alt="placeholder"
            className="rounded-xl md:col-span-2"
          />
        </div>
      </div>
    </section>
  );
};

export { About5 };