import { CornerDownLeft, ShoppingCart } from "lucide-react";

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

interface Hero129Props {
  className?: string;
}

const Hero129 = ({ className }: Hero129Props) => {
  return (
    <section className={cn("font-manrope px-8 py-12 md:py-20", className)}>
      <div className="relative mx-auto w-full max-w-[77rem]">
        <div className="relative z-10 grid grid-cols-1 items-center gap-20 xl:grid-cols-2 xl:grid-rows-[48.875rem] xl:gap-0">
          <div className="flex flex-col gap-12 lg:gap-20 xl:pe-20">
            <h1 className="text-[3.375rem] leading-none font-extrabold md:text-2xll lg:text-[5rem]">
              حضور{" "}
              <span className="relative after:absolute after:top-[15%] after:left-0 after:z-[-1] after:inline-block after:h-[70%] after:w-[100%] after:bg-muted after:content-['']">
                دیجیتال
                                            </span>
              کسب‌وکار خود را متحول کنید
                                      </h1>
            <div className="flex flex-col gap-6">
              <p className="text-xl">
                صفحات فرود و وب‌سایت‌های حرفه‌ای را بدون پیچیدگی طراحی و منتشر کنید.
                                            </p>
              <div className="flex flex-col items-center gap-2 md:flex-row">
                <Button
                  asChild
                  variant="default"
                  size="lg"
                  className="w-full md:w-auto"
                >
                  <a href="#">
                    <ShoppingCart className="h-6 w-6 fill-white" />
                    <div>شروع رایگان</div>
                  </a>
                </Button>
                <Button
                  asChild
                  variant="outline"
                  size="lg"
                  className="w-full md:w-auto"
                >
                  <a href="#">مشاهده قالب‌ها</a>
                </Button>
              </div>
              <div>
                <div className="relative flex -space-x-[0.875rem]">
                  <Avatar className="relative z-10 flex h-12 w-12 shrink-0 rounded-full border border-4 border-black/20 border-white object-cover">
                    <AvatarImage
                      src="/block-media/shadcnblocks/block/avatar-1.webp"
                      alt="تصویر نمونه"
                    />
                    <AvatarFallback>AB</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative z-20 flex h-12 w-12 shrink-0 rounded-full border border-4 border-black/20 border-white object-cover">
                    <AvatarImage
                      src="/block-media/shadcnblocks/block/avatar-2.webp"
                      alt="تصویر نمونه"
                    />
                    <AvatarFallback>CD</AvatarFallback>
                  </Avatar>
                  <Avatar className="relative z-30 flex h-12 w-12 shrink-0 rounded-full border border-4 border-black/20 border-white object-cover">
                    <AvatarImage
                      src="/block-media/shadcnblocks/block/avatar-3.webp"
                      alt="تصویر نمونه"
                    />
                    <AvatarFallback>EF</AvatarFallback>
                  </Avatar>
                </div>
                <div className="relative mt-2 w-fit pe-28">
                  <p className="w-fit text-base font-medium">
                    مورد اعتماد بیش از ۳۲۰۰ کاربر
                  </p>
                  <div className="absolute top-0 right-[10%] flex w-fit -translate-y-2/3 flex-col items-center gap-1">
                    <p className="font-handwriting text-xl">و بسیاری دیگر</p>
                    <CornerDownLeft className="h-6 w-6 stroke-black" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="relative aspect-[0.782051282/1] self-stretch justify-self-stretch overflow-hidden bg-accent sm:aspect-auto sm:min-h-[48.875rem] xl:min-h-fit">
            <div className="absolute top-auto bottom-0 aspect-[0.855555556/1] w-full max-w-[38.5rem] overflow-hidden">
              <div className="absolute -bottom-[30%] -left-[30%] z-20 w-full max-w-[616px]">
                <img
                  src="/block-media/shadcnblocks/block/hero129/phone.png"
                  alt="تصویر نمونه"
                  className="relative z-10"
                />
                <div className="absolute top-[15%] left-[12%] z-40 aspect-[0.46182266/1] w-[60%] [perspective:4000px]">
                  <div className="h-full w-full [transform:rotate(48.5deg)_rotateY(40deg)_rotateX(16deg)_skew(19.2deg)] overflow-hidden rounded-3xl">
                    <img
                      src="/block-media/shadcnblocks/block/placeholder-1.svg"
                      alt="تصویر نمونه"
                      className="h-full w-full object-cover object-center"
                    />
                  </div>
                </div>
              </div>
              <div className="absolute -bottom-[27%] left-[10%] z-10 w-full max-w-[616px]">
                <img
                  src="/block-media/shadcnblocks/block/hero129/phone.png"
                  alt="تصویر نمونه"
                  className="relative z-10"
                />
                <div className="absolute top-[15%] left-[12%] z-40 aspect-[0.46182266/1] w-[60%] [perspective:4000px]">
                  <div className="h-full w-full [transform:rotate(48.5deg)_rotateY(40deg)_rotateX(16deg)_skew(19.2deg)] overflow-hidden rounded-3xl">
                    <img
                      src="/block-media/shadcnblocks/block/placeholder-2.svg"
                      alt="تصویر نمونه"
                      className="h-full w-full object-cover object-center"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="absolute top-0 left-0 flex h-full w-full justify-between">
          <div className="h-full w-[1px] border-r border-dashed border-black/20" />
          <div className="h-full w-[1px] border-r border-dashed border-black/20" />
          <div className="h-full w-[1px] border-r border-dashed border-black/20" />
          <div className="h-full w-[1px] border-r border-dashed border-black/20" />
          <div className="h-full w-[1px] border-r border-dashed border-black/20" />
        </div>
      </div>
    </section>
  );
};

export { Hero129 };