import { AspectRatio } from "@/components/ui/aspect-ratio";
import { cn } from "@/lib/utils";

interface Hero179Props {
  className?: string;
}

const Hero179 = ({ className }: Hero179Props) => {
  return (
    <section
      className={cn("relative border-b border-muted bg-background", className)}
    >
      <div className="container pt-10">
        <div className="grid grid-cols-1 items-center gap-2 md:gap-4 lg:grid-cols-2">
          <div className="flex w-full max-w-[31.25rem] flex-col gap-9 lg:max-w-[37.5rem] lg:py-[20%] xl:py-[26%]">
            <p className="font-mono text-[clamp(0.875rem,0.875vw,1rem)] text-muted-foreground">
              صندوق ورودی مشترک
            </p>
            <h1 className="text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] text-foreground">
              صندوق ورودی تیمی
                                        <br />
              را سازمان‌دهی کنید
                                      </h1>
            <p className="text-[clamp(1.125rem,1.125vw,1.4rem)] leading-normal text-muted-foreground">
              ایمیل‌ها، پیام‌های شبکه‌های اجتماعی و درخواست‌های مشتریان را در یک صندوق ورودی مشترک مدیریت کنید.
                                      </p>
          </div>
          <div>
            <div className="relative ms-8 aspect-square w-full max-w-[56.25rem] overflow-hidden lg:absolute lg:end-0 lg:bottom-0 lg:w-1/2">
              <div className="absolute right-0 bottom-0 w-[85%] overflow-hidden rounded-lg">
                <AspectRatio ratio={0.918918919 / 1}>
                  <img
                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
                    alt="تصویر نمونه"
                    className="block size-full object-cover object-top-left"
                  />
                </AspectRatio>
              </div>
              <div className="absolute right-0 bottom-0 w-[93%] overflow-hidden rounded-tl-lg shadow-md">
                <AspectRatio ratio={1.381308411 / 1}>
                  <img
                    src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
                    alt="تصویر نمونه"
                    className="block size-full object-cover object-center"
                  />
                </AspectRatio>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero179 };