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

interface Hero78Props {
  className?: string;
}

const Hero78 = ({ className }: Hero78Props) => {
  return (
    <section
      className={cn(
        "dark relative flex h-svh max-h-[1400px] min-h-[600px] w-full overflow-hidden bg-[url('/block-media/shadcnblocks/block/full-width-backgrounds/pawel-czerwinski-IbHFznCKnqA-unsplash.jpg')] bg-cover bg-center bg-no-repeat font-sans after:absolute after:inset-0 after:z-10 after:bg-black/20 after:content-['']",
        className,
      )}
    >
      <div className="relative z-30 m-auto flex max-w-[46.25rem] flex-col items-center justify-center gap-6 px-5">
        <h1 className="text-center font-serif text-xl leading-tight text-foreground md:text-2xll xl:text-[4.4rem]">
          دنیای علم را کشف کنید
                          </h1>
        <p className="text-center text-base text-foreground">
          مجموعه‌ای از تصاویر و محتوای علمی که شما را با دستاوردهای فناوری، مهندسی و معماری آشنا می‌کند.
                          </p>
        <Button className="h-fit w-fit rounded-full px-7 py-4 text-sm leading-tight font-medium">
          مشاهده همه تصاویر
        </Button>
      </div>
      <div className="pointer-events-none absolute inset-0 z-20 h-full w-full bg-[url('/block-media/shadcnblocks/block/patterns/noise.png')] bg-repeat opacity-15" />
    </section>
  );
};

export { Hero78 };