import { CircleArrowRight, Files, Settings } from "lucide-react";

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

interface About1Props {
  className?: string;
}

const About1 = ({ className }: About1Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container flex flex-col gap-16 lg:gap-28">
        <div className="flex flex-col gap-4 lg:gap-8">
          <h1 className="text-xl font-semibold tracking-tighter lg:text-2xll">
            درباره ما
          </h1>
          <p className="max-w-xl text-xl">
            پلتفرم ما ساخت پورتال مشتری، سامانه‌های سامانه ارتباط با مشتری و فروش، ابزارهای داخلی و نرم‌افزارهای سازمانی را برای تیم شما ساده می‌کند؛ در چند دقیقه، نه چند ماه.
                                </p>
        </div>
        <div className="grid gap-6 md:grid-cols-2">
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="placeholder"
            className="size-full max-h-96 rounded-2xl object-cover"
          />
          <div className="flex flex-col justify-between gap-10 rounded-2xl bg-muted bg-[url('/block-media/shadcnblocks/block/photos/christin-hume-Hcfwew744z4-unsplash.jpg')] bg-cover bg-center p-10">
            <p className="text-sm font-semibold text-white">مأموریت ما</p>
            <p className="text-lg font-medium text-white">
              باور ما این است که ساخت نرم‌افزار باید برای همه ساده و در دسترس باشد. هر کسی باید بتواند بدون نیاز به طراح یا برنامه‌نویس، ابزار موردنیاز خود را بسازد.
                                      </p>
          </div>
        </div>
        <div className="flex flex-col gap-6 md:gap-20">
          <div className="max-w-xl">
            <h2 className="mb-4 text-3xl font-semibold tracking-tight md:text-2xll">
              ساخت نرم‌افزار را ساده کرده‌ایم
                                      </h2>
            <p className="text-lg text-muted-foreground">
              ما قصد داریم به یک میلیون تیم کمک کنیم تا نرم‌افزار اختصاصی خود را بسازند. این هم برنامه‌ی ما برای رسیدن به این هدف است.
            </p>
          </div>
          <div className="grid gap-10 md:grid-cols-3">
            <div className="flex flex-col">
              <div className="mb-5 flex size-12 items-center justify-center rounded-2xl bg-accent">
                <Files className="size-5" />
              </div>
              <h3 className="mt-2 mb-3 text-lg font-semibold">
                شفافیت و همکاری
                                            </h3>
              <p className="text-muted-foreground">
                ما باور داریم همکاری زمانی شکل می‌گیرد که فروتنی، احترام و روحیه کمک به یکدیگر بخشی از فرهنگ تیم باشد. بازخورد سازنده، گفت‌وگوی شفاف و یادگیری مداوم از ارزش‌های اصلی ما هستند.
                                            </p>
            </div>
            <div className="flex flex-col">
              <div className="mb-5 flex size-12 items-center justify-center rounded-2xl bg-accent">
                <CircleArrowRight className="size-5" />
              </div>
              <h3 className="mt-2 mb-3 text-lg font-semibold">
                ایجاد تغییر چشمگیر 
              </h3>
              <p className="text-muted-foreground">
                با جسارت، شجاعت و اهداف شفاف. ما به دنبال فرصت‌های بزرگ هستیم و تمرکز و انرژی خود را بر مهم‌ترین کارهایی که باید انجام شوند، دوچندان می‌کنیم.
              </p>
            </div>
            <div className="flex flex-col">
              <div className="mb-5 flex size-12 items-center justify-center rounded-2xl bg-accent">
                <Settings className="size-5" />
              </div>
              <h3 className="mt-2 mb-3 text-lg font-semibold">
                بهینه‌سازی برای توانمندسازی
              </h3>
              <p className="text-muted-foreground">
                ما باور داریم که همه باید توانمند باشند تا هر کاری را که به نظرشان در راستای منافع شرکت است انجام دهند.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { About1 };