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 };