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

interface Hero178Props {
  className?: string;
}

const Hero178 = ({ className }: Hero178Props) => {
  return (
    <section
      className={cn(
        "relative border-b border-muted bg-background pt-10",
        className,
      )}
    >
      <div className="container">
        <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(2.25rem,calc(3.5vw+1.25rem),5.5rem)] leading-[0.95] 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 bottom-0 left-[0%] w-[70%] overflow-hidden rounded-tl-lg">
                <AspectRatio ratio={1.9 / 1}>
                  <img
                    src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
                    alt="تصویر نمونه"
                    className="block h-full w-full object-cover object-center"
                  />
                </AspectRatio>
              </div>
              <div className="absolute right-[5%] bottom-0 w-[40%] overflow-hidden rounded-tl-lg rounded-tr-lg shadow-md">
                <AspectRatio ratio={0.776119403 / 1}>
                  <img
                    src="/block-media/shadcnblocks/block/placeholder-dark-3.svg"
                    alt=""
                    className="block h-full w-full object-cover object-top"
                  />
                </AspectRatio>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero178 };