import { MoveUpRight, Star } from "lucide-react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Hero152Props {
  className?: string;
}

const Hero152 = ({ className }: Hero152Props) => {
  return (
    <section className={cn("bg-muted pt-12 font-sans md:pt-20", className)}>
      <div className="mx-auto max-w-[99rem] px-0 sm:px-8">
        <div className="container px-4">
          <div className="mx-auto flex max-w-[25rem] flex-col items-center gap-6 sm:max-w-[31.25rem] lg:max-w-[40rem]">
            <div className="flex items-center justify-center gap-2">
              <Star className="size-5 fill-black stroke-black" />
              <p className="text-sm text-nowrap">
                مورد اعتماد بیش از ۷٬۰۰۰ مشتری
              </p>
            </div>
            <div className="mb-2">
              <h1 className="text-center text-[2.8125rem] leading-none font-bold sm:text-[3.9375rem] lg:text-[5.3125rem]">
                سیستم طراحی که نتیجه می‌دهد
              </h1>
            </div>
            <p className="text-center text-base leading-snug text-balance text-muted-foreground sm:text-xl">
              رابط‌های کاربری را طراحی، نمونه‌سازی و شخصی‌سازی کنید و در کمترین زمان آماده توسعه نمایید.
                                      </p>
            <div className="flex w-full flex-wrap items-center gap-4 md:w-fit">
              <Button
                variant="secondary"
                asChild
                className="group flex h-fit min-w-[11.25rem] flex-1 items-center justify-center gap-1 rounded-[5rem] border-2 border-black px-4 py-3 text-base font-semibold md:min-w-fit md:flex-none"
              >
                <a href="#">
                  <img
                    src="/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg"
                    alt="تصویر نمونه"
                    className="block size-6 shrink-0"
                  />
                  <p className="text-nowrap transition-all duration-300 ease-in-out group-hover:text-primary">
                    پیش‌نمایش
                  </p>
                  <MoveUpRight className="size-6 shrink-0 stroke-black transition-all duration-300 ease-in-out group-hover:stroke-primary rtl:rotate-180" />
                </a>
              </Button>
              <Button
                asChild
                variant="default"
                className="group flex h-fit min-w-[11.25rem] flex-1 items-center justify-center gap-1 rounded-[5rem] border-2 border-primary bg-primary px-4 py-3 text-base font-semibold text-nowrap text-white md:min-w-fit md:flex-none"
              >
                <a href="#">دریافت کامپوننت‌ها</a>
              </Button>
            </div>
          </div>
        </div>
        <div className="relative mt-16 aspect-[1.2/1] overflow-hidden sm:-right-[10%] sm:right-auto sm:mt-28 sm:aspect-[2.788990826/1]">
          <div className="absolute top-[11%] left-[8%] z-10 aspect-[0.7/1] w-[80%] sm:left-[4%] sm:w-[45%]">
            <div className="size-full [transform:rotateY(-30deg)_rotateX(-18deg)_rotate(-4deg)]">
              <img
                src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
                alt="تصویر نمونه"
                className="block size-full object-cover object-center"
              />
            </div>
          </div>
          <div className="absolute top-0 left-[70%] z-20 aspect-[0.7/1] w-[73%] -translate-x-1/2 sm:left-1/2 sm:w-[38%]">
            <div className="size-full [transform:rotateY(-30deg)_rotateX(-18deg)_rotate(-4deg)] shadow-[-25px_0px_20px_0px_rgba(0,0,0,.04)]">
              <img
                src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
                alt="تصویر نمونه"
                className="block size-full object-cover object-center"
              />
            </div>
          </div>
          <div className="absolute top-[3%] -right-[45%] z-30 aspect-[0.7/1] w-[85%] sm:-right-[2%] sm:w-[50%]">
            <div className="size-full [transform:rotateY(-30deg)_rotateX(-18deg)_rotate(-4deg)] shadow-[-25px_0px_20px_0px_rgba(0,0,0,.04)]">
              <img
                src="/block-media/shadcnblocks/block/placeholder-dark-3.svg"
                alt="تصویر نمونه"
                className="block size-full object-cover object-center"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero152 };