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

/*
 * pattern generated at https://www.fffuel.co/ooorganize/
 */

interface Hero10Props {
  className?: string;
}

const Hero10 = ({ className }: Hero10Props) => {
  return (
    <section className={cn("relative p-0", className)}>
      <div className="absolute h-full w-full bg-[url('/block-media/shadcnblocks/block/patterns/grid1.svg')] [mask-image:linear-gradient(to_right,theme(colors.border),transparent,transparent,theme(colors.border))] bg-contain bg-repeat opacity-100 lg:block"></div>
      <div className="container py-28 md:py-32">
        <div className="mx-auto flex max-w-5xl flex-col items-center">
          <div className="z-10 mx-auto flex max-w-5xl flex-col items-center gap-6 text-center">
            <Badge variant="outline" className="rounded-sm shadow-sm">
              نسخه جدید منتشر شد
                                      </Badge>
            <div>
              <h1 className="mb-6 text-xl font-bold tracking-tight text-pretty md:text-2xll lg:text-2xll">
                همه ابزارهای موردنیاز برای توسعه رابط کاربری
                                            </h1>
              <p className="mx-auto max-w-2xl text-muted-foreground md:text-lg lg:text-xl">
                کامپوننت‌های آماده و استاندارد را انتخاب کنید، سفارشی‌سازی کنید و بدون اتلاف زمان در پروژه خود به‌کار بگیرید.
                                            </p>
            </div>

            <div className="mt-6 flex items-center gap-4">
              <Button>شروع رایگان</Button>
              <Button variant="outline">آشنایی بیشتر</Button>
            </div>

            <div className="mt-12 flex flex-col items-center gap-4 lg:mt-16">
              <p className="text-center text-sm text-muted-foreground">
                زیرساختی مناسب برای ساخت محصولات مدرن و مقیاس‌پذیر
                                            </p>
              <div className="grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4">
                <img
                  src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
                  alt="لوگوی ری یو آی"
                  className="h-6 dark:invert"
                />
                <img
                  src="/block-media/shadcnblocks/block/logos/vercel-wordmark.svg"
                  alt="لوگوی میزبانی ابری"
                  className="h-5 dark:invert"
                />
                <img
                  src="/block-media/shadcnblocks/block/logos/supabase-wordmark.svg"
                  alt="لوگوی پایگاه داده ابری"
                  className="h-6 dark:hidden"
                />
                <img
                  src="/block-media/shadcnblocks/block/logos/supabase-wordmark-dark.svg"
                  alt="لوگوی پایگاه داده ابری"
                  className="hidden h-6 dark:block"
                />
                <img
                  src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-light.svg"
                  alt="لوگوی استایل‌دهی مدرن"
                  className="h-5 dark:hidden"
                />
                <img
                  src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-dark.svg"
                  alt="لوگوی استایل‌دهی مدرن"
                  className="hidden h-5 dark:block"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero10 };