import React from "react";

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

interface About13Props {
  className?: string;
}

const About13 = ({ className }: About13Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container space-y-10 lg:space-y-20">
        <div className="w-full grid-cols-6 gap-10 lg:grid">
          <div />
          <h1 className="col-span-4 text-2xll font-semibold tracking-tighter lg:pr-24 lg:pl-10 lg:text-8xl">
            درباره ما
          </h1>
        </div>
        <div className="grid-cols-6 space-y-12 lg:grid lg:space-y-0 xl:gap-10">
          <p className="hidden text-foreground/40 lg:block">
            تیم ما، مأموریت ما
          </p>
          <div className="col-span-2 lg:pr-24 lg:pl-10">
            <p className="text-foreground/40">
              می‌خواهیم ذهن‌های متنوع را کنار هم بیاوریم و ایده‌ها را به
              تجربه‌هایی تبدیل کنیم که اهمیت دارند.
            </p>
            <div className="mt-5 flex items-center gap-5 lg:mt-20">
              <img
                src="/block-media/shadcnblocks/block/guri3/avatar1.png"
                className="size-12"
                alt="آواتار"
              />
              <div>
                <h3 className="text-lg font-medium tracking-tight">علی رضایی</h3>
                <p className="text-sm text-foreground/40">مدیر خلاقیت</p>
              </div>
            </div>
          </div>
          <div className="col-span-3 mt-32 lg:mt-0 lg:pl-10">
            <h2 className="text-xl font-medium tracking-tight lg:text-3xl">
              ما تیمی از متخصصان محصول، فروش و بازاریابی هستیم که به ساخت
              پلتفرم‌های B2B مؤثر باور داریم. مأموریت ما بر نوآوری،
              کارایی و کمک به رشد درآمد تیم‌های فروش بنا شده است.
            </h2>
            <p className="mt-6 text-base text-foreground/40 lg:mt-18 lg:text-lg">
              همیشه از خود می‌پرسیم: هدف چیست؟ مخاطب کیست؟ و چگونه می‌توان تجربه‌ای ساده‌تر و بهتر خلق کرد؟
                                      </p>
          </div>
        </div>
        <div>
          <img
            src="/block-media/shadcnblocks/block/guri4/img10.png"
            alt="تصویر درباره ما"
            className="mt-4 h-150 w-full object-cover"
          />
        </div>
      </div>
    </section>
  );
};

export { About13 };