import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

interface Hero90Props {
  className?: string;
}

const Hero90 = ({ className }: Hero90Props) => {
  return (
    <section
      className={cn("font-dm_sans bg-background py-12 md:py-20", className)}
    >
      <div className="container">
        <div className="grid grid-cols-1 gap-10 md:gap-20 xl:grid-cols-2">
          <div className="flex flex-col gap-6">
            <p className="text-xl font-medium text-foreground">مدیریت ویدیو</p>
            <h1 className="max-w-[37.5rem] text-xl font-semibold text-foreground sm:text-2xll md:max-w-[51.25rem] md:text-2xll">
              ویدیوهای مهم را به‌سادگی منتشر کنید
                                      </h1>
            <p className="text-xl font-medium text-muted-foreground">
              ویدیوهای آموزشی، رویدادها و محتوای تیمی را به‌سادگی مدیریت و منتشر کنید.
                                      </p>
          </div>
          <div>
            <div className="relative mx-auto aspect-[1.723502304/1] max-w-[46.75rem]">
              <div className="absolute top-0 left-0 z-30 flex aspect-square w-[42%] rounded-2xl bg-muted sm:rounded-3xl md:rounded-[2.25rem]">
                <div className="m-auto flex w-[85%] flex-col gap-2 md:gap-4">
                  <div className="flex items-center justify-center gap-[2%]">
                    <Avatar className="size-[68%]">
                      <AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
                      <AvatarFallback>AV</AvatarFallback>
                    </Avatar>
                  </div>
                  <p className="line-clamp-2 text-center text-[clamp(0.5rem,2.5vw,1.125rem)] font-semibold text-muted-foreground">
                    از تجربه من، واقعاً افراد بودند که تفاوت را در موفقیت ما
                    رقم زدند
                  </p>
                </div>
              </div>
              <div className="absolute bottom-0 left-1/3 z-20 flex aspect-square w-[42%] rounded-2xl bg-muted sm:rounded-3xl md:rounded-[2.25rem]">
                <div className="m-auto flex w-[85%] flex-col gap-2 md:gap-4">
                  <Avatar className="mx-auto size-[68%]">
                    <AvatarImage src="/block-media/shadcnblocks/block/avatar-2.webp" />
                    <AvatarFallback>AV</AvatarFallback>
                  </Avatar>
                  <p className="line-clamp-2 text-center text-[clamp(0.5rem,2.5vw,1.125rem)] font-semibold text-muted-foreground">
                    <span className="text-foreground">افرادی پرشور</span> در
                    ایجاد ارتباطات معنادار و پیشبرد نوآوری
                  </p>
                </div>
              </div>
              <div className="absolute right-0 bottom-[15%] z-10 flex aspect-square w-[42%] rounded-2xl bg-muted sm:rounded-3xl md:rounded-[2.25rem]">
                <div className="m-auto w-[85%]">
                  <Avatar className="absolute right-[5%] bottom-[5%] z-20 size-[26%]">
                    <AvatarImage src="/block-media/shadcnblocks/block/avatar-3.webp" />
                    <AvatarFallback>AV</AvatarFallback>
                  </Avatar>
                  <p className="line-clamp-4 text-[clamp(0.5rem,2.5vw,1.25rem)] font-semibold text-foreground/60">
                    فناوری پیشرفت را هدایت می‌کند، ارتباط را تقویت می‌کند،
                    مسائل را حل می‌کند و امکانات تازه می‌گشاید و آینده کار و
                    ارتباط ما را شکل می‌دهد
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero90 };