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

interface About6Props {
  className?: string;
}

const About6 = ({ className }: About6Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center justify-start gap-6 lg:flex-row">
          <div className="flex w-full flex-col items-start justify-start gap-24 lg:w-1/2">
            <div className="pr-6">
              <h1 className="mb-6 text-xl font-bold md:text-2xll lg:mb-10 lg:text-2xll">
                درباره ما
              </h1>
              <p className="mb-9 text-muted-foreground lg:text-xl">
                هم‌آهنگ فضای کاری مشترک برای تیم‌های فروش، بازاریابی و موفقیت مشتری است. گفت‌وگو، فایل‌ها و تصمیم‌ها کنار هر فرصت و کمپین باقی می‌مانند.
                                            </p>
            </div>
            <div className="flex flex-col items-center justify-center gap-6 md:flex-row">
              <img
                src="/block-media/shadcnblocks/block/photos/annie-spratt-MChSQHxGZrQ-unsplash.jpg"
                alt="فضای همکاری تیم"
                className="aspect-[0.7] w-full rounded-lg object-cover md:w-1/2"
              />
              <div className="flex w-full flex-col items-center justify-center gap-6 md:w-1/2">
                <img
                  src="/block-media/shadcnblocks/block/photos/annie-spratt-AkftcHujUmk-unsplash.jpg"
                  alt="اتاق تمرکز تیم"
                  className="aspect-[1.1] rounded-lg object-cover"
                />
                <img
                  src="/block-media/shadcnblocks/block/photos/annie-spratt-vGgn0xLdy8s-unsplash.jpg"
                  alt="جلسه هماهنگی هفتگی"
                  className="aspect-[0.7] rounded-lg object-cover"
                />
              </div>
            </div>
          </div>
          <div className="flex w-full flex-col items-center justify-center gap-12 pt-12 lg:w-1/2 lg:pt-48">
            <div className="flex flex-col items-center justify-center gap-6 md:flex-row">
              <img
                src="/block-media/shadcnblocks/block/photos/johnson-wang-iI4sR_nkkbc-unsplash.jpg"
                alt="میز کار اشتراکی"
                className="aspect-[0.9] w-full rounded-lg object-cover md:w-1/2"
              />
              <div className="flex w-full flex-col items-center justify-center gap-6 md:w-1/2">
                <img
                  src="/block-media/shadcnblocks/block/photos/nastuh-abootalebi-eHD8Y1Znfpk-unsplash.jpg"
                  alt="ایستگاه همکاری"
                  className="aspect-[0.8] rounded-lg object-cover"
                />
                <img
                  src="/block-media/shadcnblocks/block/photos/alvin-engler-bIhpiQA009k-unsplash.jpg"
                  alt="فضای برنامه‌ریزی"
                  className="aspect-[0.9] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="px-8">
              <h1 className="mb-8 text-xl font-semibold lg:mb-6">
                نحوه همکاری ما
              </h1>
              <p className="mb-9 lg:text-xl">
                هم‌آهنگ برای تیم‌های ترکیبی طراحی شده است؛ از گفت‌وگوی سریع تا مستندسازی تصمیم‌های مهم در یک بستر واحد.
                                            </p>
              <p className="text-muted-foreground">
                کانال‌های موضوعی، تسک‌های وابسته به مخاطب و خلاصه نشست‌ها باعث می‌شود هیچ دستاوردی بین ابزارها گم نشود. چه حضوری و چه از راه دور، تیم روی یک ریتم مشترک کار می‌کند.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { About6 };