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

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

interface Hero141Props {
  className?: string;
}

const Hero141 = ({ className }: Hero141Props) => {
  return (
    <section
      className={cn(
        "dark relative h-svh max-h-[1400px] min-h-[600px] w-full overflow-hidden bg-background px-5 font-sans",
        className,
      )}
    >
      <div className="relative z-10 flex size-full">
        <div className="m-auto flex max-w-[25rem] flex-col items-center gap-9 sm:max-w-[31.25rem] md:max-w-[50rem]">
          <h1 className="bg-linear-to-br from-neutral-100 to-neutral-600 bg-clip-text text-center text-xl leading-tight font-semibold text-transparent sm:text-2xll md:text-[4rem]">
            تماس‌های ناخواسته را مدیریت کنید
                                </h1>
          <Button
            asChild
            className="flex h-fit w-fit items-center justify-center gap-2 rounded-full px-7 py-3.5 font-medium shadow-[0_0_5px_5px_rgba(255,255,255,.3)] transition-all duration-500 hover:bg-neutral-200 hover:shadow-[0_0_10px_5px_rgba(255,255,255,.5)]"
          >
            <a href="#">
              <p>همین حالا تهیه کنید</p>
              <ChevronRight className="size-5 rtl:rotate-180" />
            </a>
          </Button>
          <div>
            <div className="flex items-center justify-center gap-0.5">
              <Star className="fill-muted2-foreground size-3" />
              <Star className="fill-muted2-foreground size-3" />
              <Star className="fill-muted2-foreground size-3" />
              <Star className="fill-muted2-foreground size-3" />
              <Star className="fill-muted2-foreground size-3" />
            </div>
            <p className="mt-1.5 max-w-40 text-center text-xs leading-snug font-medium text-foreground/60">
              مورد اعتماد بیش از ۲٬۰۰۰ فرد پرکار
            </p>
          </div>
        </div>
      </div>
      <div className="absolute inset-0 size-full before:absolute before:inset-0 before:bg-background/85 before:content-['']">
        <video
          src="/block-media/shadcnblocks/block/video-1.mp4"
          muted
          autoPlay
          loop
          controls={false}
          className="size-full object-cover object-center"
        />
      </div>
    </section>
  );
};

export { Hero141 };