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

interface Hero144Props {
  className?: string;
}

const Hero144 = ({ className }: Hero144Props) => {
  return (
    <section
      className={cn("dark relative bg-background py-24 md:py-52", className)}
    >
      <div className="relative z-20 container">
        <div className="flex w-full flex-col items-center gap-8">
          <div className="w-full max-w-[43.125rem]">
            <div className="flex w-full items-end justify-center gap-[2.8%]">
              <div className="relative w-full max-w-[8.25rem] origin-bottom scale-[.83] overflow-hidden rounded-[20%] border border-stone-800 bg-stone-900 opacity-70 shadow-[inset_0_1px_1px_0_var(--color-stone-700)] blur-[3px] before:absolute before:top-0 before:left-0 before:z-10 before:block before:size-full before:bg-linear-to-tr before:from-stone-950 before:to-transparent before:content-['']">
                <AspectRatio ratio={1} className="flex">
                  <img
                    src="/block-media/shadcnblocks/block/logos/sketch-icon.svg"
                    alt="تصویر نمونه"
                    className="m-auto w-[60%] object-cover object-center"
                  />
                </AspectRatio>
              </div>
              <div className="relative w-full max-w-[8.25rem] origin-bottom scale-90 overflow-hidden rounded-[20%] border border-stone-900 bg-stone-900 shadow-[inset_0_1px_1px_0_var(--color-stone-700)] before:absolute before:top-0 before:left-0 before:z-10 before:block before:h-full before:w-full before:bg-linear-to-tr before:from-black/50 before:to-transparent before:content-['']">
                <AspectRatio ratio={1} className="flex">
                  <img
                    src="/block-media/shadcnblocks/block/logos/figma-icon.svg"
                    alt="تصویر نمونه"
                    className="m-auto w-[60%] object-cover object-center p-3"
                  />
                </AspectRatio>
              </div>
              <div className="w-full max-w-[8.25rem] overflow-hidden rounded-[20%] border border-stone-800 bg-stone-900 shadow-[inset_0_1px_1px_0_var(--color-stone-700)]">
                <AspectRatio ratio={1} className="flex">
                  <img
                    src="/block-media/shadcnblocks/block/logos/notion-icon.svg"
                    alt="تصویر نمونه"
                    className="m-auto w-[60%] object-cover object-center"
                  />
                </AspectRatio>
              </div>
              <div className="relative w-full max-w-[8.25rem] origin-bottom scale-90 overflow-hidden rounded-[20%] border border-stone-900 bg-stone-900 shadow-[inset_0_1px_1px_0_var(--color-stone-700)] before:absolute before:top-0 before:left-0 before:z-10 before:block before:h-full before:w-full before:bg-linear-to-tl before:from-black/50 before:to-transparent before:content-['']">
                <AspectRatio ratio={1} className="flex">
                  <img
                    src="/block-media/shadcnblocks/block/logos/spotify-icon.svg"
                    alt="تصویر نمونه"
                    className="m-auto w-[60%] object-cover object-center"
                  />
                </AspectRatio>
              </div>
              <div className="relative w-full max-w-[8.25rem] origin-bottom scale-[.83] overflow-hidden rounded-[20%] border border-stone-800 bg-stone-900 opacity-70 shadow-[inset_0_1px_1px_0_var(--color-stone-700)] blur-[3px] before:absolute before:top-0 before:left-0 before:z-10 before:block before:h-full before:w-full before:bg-linear-to-tl before:from-stone-950 before:to-transparent before:content-['']">
                <AspectRatio ratio={1} className="flex">
                  <img
                    src="/block-media/shadcnblocks/block/logos/vscode-icon.svg"
                    alt="تصویر نمونه"
                    className="m-auto w-[60%] object-cover object-center"
                  />
                </AspectRatio>
              </div>
            </div>
            <div className="flex w-full items-start justify-center gap-[2.8%] pt-[3%]">
              <div className="relative w-full max-w-[7.625rem] origin-bottom scale-[.83] overflow-hidden rounded-[20%] border border-stone-950 bg-stone-900 opacity-70 shadow-[inset_0_1px_1px_0_var(--color-stone-700)] blur-[3px] before:absolute before:top-0 before:left-0 before:z-10 before:block before:h-full before:w-full before:bg-linear-to-tr before:from-stone-950 before:to-transparent before:content-['']">
                <AspectRatio ratio={1} className="flex">
                  <img
                    src="/block-media/shadcnblocks/block/logos/google-icon.svg"
                    alt="تصویر نمونه"
                    className="m-auto w-[60%] object-cover object-center"
                  />
                </AspectRatio>
              </div>
              <div className="relative w-full max-w-[7.625rem] overflow-hidden rounded-[20%] border border-stone-950 bg-stone-900 opacity-90 shadow-[inset_0_1px_1px_0_var(--color-stone-700)] before:absolute before:top-0 before:left-0 before:z-10 before:block before:h-full before:w-full before:bg-linear-to-t before:from-stone-950 before:to-transparent before:content-['']">
                <AspectRatio ratio={1} className="flex">
                  <img
                    src="/block-media/shadcnblocks/block/logos/github-icon-white.svg"
                    alt="تصویر نمونه"
                    className="m-auto w-[60%] object-cover object-center"
                  />
                </AspectRatio>
              </div>
              <div className="relative w-full max-w-[7.625rem] overflow-hidden rounded-[20%] border border-stone-950 bg-stone-900 opacity-90 shadow-[inset_0_1px_1px_0_var(--color-stone-700)] before:absolute before:top-0 before:left-0 before:z-10 before:block before:h-full before:w-full before:bg-linear-to-t before:from-stone-950 before:to-transparent before:content-['']">
                <AspectRatio ratio={1} className="flex">
                  <img
                    src="/block-media/shadcnblocks/block/logos/slack-icon.svg"
                    alt="تصویر نمونه"
                    className="m-auto w-[60%] object-cover object-center"
                  />
                </AspectRatio>
              </div>
              <div className="relative w-full max-w-[7.625rem] origin-bottom scale-[.83] overflow-hidden rounded-[20%] border border-stone-950 bg-stone-900 opacity-70 shadow-[inset_0_1px_1px_0_var(--color-stone-700)] blur-[3px] before:absolute before:top-0 before:left-0 before:z-10 before:block before:h-full before:w-full before:bg-linear-to-tl before:from-stone-950 before:to-transparent before:content-['']">
                <AspectRatio ratio={1} className="flex">
                  <img
                    src="/block-media/shadcnblocks/block/logos/dropbox-icon.svg"
                    alt="تصویر نمونه"
                    className="m-auto w-[60%] object-cover object-center"
                  />
                </AspectRatio>
              </div>
            </div>
          </div>
          <div className="flex flex-col items-center justify-center">
            <h1 className="mb-5 text-center font-sans text-2xll leading-tight font-semibold text-foreground md:text-2xll">
              بیشتر کشف کنید
            </h1>
            <p className="max-w-[35rem] text-center font-sans text-xl text-muted-foreground">
              هزاران اپلیکیشن کاربردی را مرور کنید و ابزار مناسب نیاز خود را پیدا کنید.
                                      </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero144 };