import { MoonStar, Sparkles } from "lucide-react";

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

interface Hero107Props {
  className?: string;
}

const Hero107 = ({ className }: Hero107Props) => {
  return (
    <section
      className={cn("bg-muted bg-cover bg-center py-12 md:py-20", className)}
    >
      <div className="container">
        <div className="flex flex-col justify-between gap-12 lg:flex-row lg:gap-8">
          <div className="mx-auto flex max-w-[43.75rem] flex-col gap-8 lg:mx-0">
            <div className="flex flex-col gap-6">
              <div className="m-auto flex w-fit flex-nowrap items-center gap-2 rounded-3xl border px-4 py-2 lg:m-0">
                <Sparkles className="size-5" />
                <div className="text-base font-light">
                  قالب رایگان لندینگ
                                                  </div>
              </div>
              <h1 className="to-muted2 inline-block bg-linear-to-br from-foreground bg-clip-text text-center font-serif text-xl text-transparent md:text-2xll md:leading-snug lg:text-start">
                همکار مورداعتماد شما برای خدمات دیجیتال
              </h1>
            </div>
            <div>
              <div className="mx-auto w-fit lg:mx-0">
                <Button
                  asChild
                  className="group relative grid h-fit overflow-hidden rounded-full px-7 py-5 shadow-[0_1000px_0_0_hsl(0_0%_20%)_inset]"
                >
                  <a href="#">
                    <span className="spark mask-gradient absolute inset-0 h-[100%] w-[100%] animate-flip-btn overflow-hidden rounded-full [mask:linear-gradient(white,transparent_50%)] before:absolute before:[inset:0_auto_auto_50%] before:aspect-square before:w-[200%] before:[translate:-50%_-15%] before:rotate-[-90deg] before:animate-rotate-btn before:bg-[conic-gradient(from_0deg,transparent_0_340deg,var(--color-muted)_360deg)] before:content-['']" />
                    <span className="backdrop absolute inset-[2.5px] rounded-full bg-black transition-colors duration-200 group-hover:bg-slate-900" />
                    <span className="text z-10 text-center font-medium text-white">
                      مشاهده جزئیات
                                                              </span>
                  </a>
                </Button>
              </div>
              <div
                className="my-9 h-[1px] w-full bg-black"
                style={{
                  background:
                    "linear-gradient(270deg, rgba(234, 232, 225, .2) 0%, rgba(17, 16, 17, .2) 50%, rgba(17, 16, 17, 0) 100%)",
                }}
              />
              <p className="mx-auto w-full max-w-[30rem] text-center text-lg font-light text-foreground lg:mx-0 lg:text-start">
                به استارتاپ‌ها و برندها در ساخت راه‌حل‌های مؤثر و جذاب برای
                نیازهای نرم‌افزاری کمک می‌کنیم.
              </p>
            </div>
          </div>
          <div className="mx-auto w-full max-w-[31.25rem]">
            <div className="relative mx-auto w-full max-w-full lg:mx-0">
              <div className="w-full overflow-hidden rounded-3xl">
                <AspectRatio ratio={1}>
                  <img
                    src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
                    alt="تصویر مربعی"
                    className="size-full object-cover"
                  />
                </AspectRatio>
              </div>
              <div className="absolute right-0 bottom-0">
                <Button
                  asChild
                  variant="secondary"
                  className="m-4 flex h-fit items-center gap-2 rounded-xl px-5 py-4 text-xl font-semibold shadow-md"
                >
                  <a href="#">
                    <MoonStar className="size-6!" />
                    <div>شروع همکاری</div>
                  </a>
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero107 };