import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface About4Props {
  className?: string;
}

const About4 = ({ className }: About4Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-3xl flex-col gap-8 pb-28 text-center">
          <h1 className="text-xl font-semibold md:text-2xll">درباره ما</h1>
          <p className="text-xl font-medium text-muted-foreground">
            با تیم ما آشنا شوید، ارزش‌هایمان را بشناسید و ببینید چطور کار، زندگی و
            همه‌چیز بین این دو را متعادل می‌کنیم.
          </p>
        </div>
        <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="placeholder"
            className="max-h-80 w-full object-cover"
          />
          <img
            src="/block-media/shadcnblocks/block/placeholder-2.svg"
            alt="placeholder"
            className="max-h-80 w-full object-cover"
          />
          <img
            src="/block-media/shadcnblocks/block/placeholder-3.svg"
            alt="placeholder"
            className="max-h-80 w-full object-cover"
          />
          <img
            src="/block-media/shadcnblocks/block/placeholder-4.svg"
            alt="placeholder"
            className="max-h-80 w-full object-cover"
          />
          <img
            src="/block-media/shadcnblocks/block/placeholder-5.svg"
            alt="placeholder"
            className="max-h-80 w-full object-cover"
          />
          <img
            src="/block-media/shadcnblocks/block/placeholder-6.svg"
            alt="placeholder"
            className="max-h-80 w-full object-cover"
          />
        </div>
        <div className="mx-auto grid max-w-5xl gap-28 py-28 md:grid-cols-2">
          <div>
            <h2 className="mb-5 text-xl font-semibold">چشم‌انداز ما</h2>
            <p className="text-xl leading-8 font-medium text-muted-foreground">
              سال‌هاست فرایند ساخت نرم‌افزار سفارشی دشوار مانده است؛ امروز ابزارهای
              بصری هست، اما راهکارهای دقیق همچنان به تخصص فنی و زمان زیاد نیاز
              دارند و این برای کسب‌وکارها و افراد دردساز است.
              <br />
              <br />
              اگر می‌توانستید بدون نوشتن حتی یک خط کد، نرم‌افزار سفارشی بسازید
              چه؟ اگر می‌توانستید ابزارهای خودتان را بسازید؟
              <br />
              <br />
              با پلتفرم ما می‌توانید! ابزارهای ما به شما اجازه می‌دهند چیدمان
              طراحی کنید و قابلیت بسازیدهمه این‌ها بدون نیاز به کدنویسی.
              <br />
              <br />
              ما باور داریم هر کسی باید بتواند راهکار خودش را بسازد، فارغ از
              پیشینه فنی.
            </p>
          </div>
          <div>
            <h2 className="mb-5 text-xl font-semibold">سازندگان</h2>
            <p className="text-xl leading-8 font-medium text-muted-foreground">
              <a href="#" className="mr-1 underline">
                شرکت ما
              </a>
              بیش از یک دهه است ابزارهای وب می‌سازد و در هر پروژه بر کارایی و کنترل
              کاربر تمرکز دارد. می‌دانیم بهترین راهکارها همان‌هایی‌اند که خودتان
              می‌توانید بسازید.
              <br />
              <br />
              ابتدا این راهکارها را برای تیم خودمان توسعه دادیم و حالا همه
              می‌توانند از آن‌ها بهره ببرند. افتخار می‌کنیم پلتفرمی در دسترس همه
              ارائه می‌دهیم، بدون توجه به تخصص فنی.
              <br />
              <br />
              تیم ما از افراد بااستعداد و مشتاق ساخت ابزاری تشکیل شده که به
              کاربران قدرت می‌دهد راهکارهایشان را به‌سادگی بسازند. در دستیابی شما
              به اهدافتان کنار شما هستیم و مشتاقیم ببینیم چه می‌سازید!
            </p>
          </div>
        </div>
        <div className="mx-auto flex max-w-5xl flex-col items-center justify-between gap-8 rounded-2xl bg-muted/50 p-14 text-center md:flex-row md:text-start">
          <h3 className="text-3xl font-semibold">
            بخشی از
            <br />
            تیم جهانی ما
          </h3>
          <Button size="lg">آشنایی با تیم</Button>
        </div>
      </div>
    </section>
  );
};

export { About4 };