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

interface Hero123Props {
  className?: string;
}

const Hero123 = ({ className }: Hero123Props) => {
  return (
    <section className={cn("bg-muted", className)}>
      <div className="container py-12 sm:py-32">
        <div className="relative grid gap-12 lg:grid-cols-2 lg:gap-24">
          <div className="">
            <span className="mb-4 block font-mono text-lg font-medium">
              منابع آموزشی
                                      </span>
            <h1 className="text-2xll font-medium tracking-tight text-foreground">
              راهکار مناسب کسب‌وکار خود را پیدا کنید
                                      </h1>
            <p className="pt-10 text-lg leading-8 text-foreground">
              مجموعه‌ای از ابزارها، آموزش‌ها و راهکارهای کاربردی که به شما کمک می‌کنند پروژه‌های خود را سریع‌تر و حرفه‌ای‌تر اجرا کنید.
                                      </p>
            <div className="mt-10 flex items-center gap-x-6">
              <Button
                asChild
                className="h-fit rounded-full px-8 py-4 text-lg font-semibold shadow-sm"
              >
                <a href="#">درخواست نسخه نمایشی</a>
              </Button>
            </div>
          </div>
          <div>
            {/* images from Figma Apple Widgets UI Kit https://www.figma.com/community/file/857332868558500566 */}
            <div className="relative mx-auto max-w-[596px] overflow-hidden rounded-lg bg-primary pt-6 ps-6 lg:mx-0">
              <AspectRatio
                ratio={0.9104 / 1}
                className="overflow-hidden rounded-tl-md"
              >
                <img
                  alt="تصویر نمونه"
                  src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
                  className="block size-full object-cover"
                />
              </AspectRatio>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero123 };