import { ChevronRight } from "lucide-react";

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

interface Hero6Props {
  className?: string;
}

const Hero6 = ({ className }: Hero6Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-5xl flex-col items-center">
          <div className="z-10 flex flex-col items-center gap-8 text-center">
            <div className="max-w-3xl">
              <h1 className="mb-4 text-xl font-semibold text-pretty lg:text-2xll">
                پروژه بعدی خود را سریع‌تر توسعه دهید
                                            </h1>
              <p className="text-muted-foreground lg:text-xl">
                کامپوننت‌های آماده و استاندارد را انتخاب کنید، سفارشی‌سازی کنید و بدون اتلاف زمان در پروژه خود به‌کار بگیرید.
                                            </p>
            </div>
            <div className="flex w-full flex-col justify-center gap-2 sm:flex-row">
              <Button>
                همین امروز شروع کنید
                                              <ChevronRight className="h-4 rtl:rotate-180" />
              </Button>
              <Button variant="ghost">
                آشنایی بیشتر
                                              <ChevronRight className="h-4 rtl:rotate-180" />
              </Button>
            </div>
          </div>
        </div>
        <div className="mx-auto mt-20 grid max-w-7xl gap-px bg-border p-px md:grid-cols-5">
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="تصویر نمونه"
            className="h-full max-h-[500px] w-full object-cover md:col-span-3 dark:invert"
          />
          <div className="relative md:col-span-2">
            <img
              src="/block-media/shadcnblocks/block/placeholder-2.svg"
              alt="تصویر نمونه"
              className="h-full max-h-[500px] w-full object-cover dark:invert"
            />
            <Button variant="outline" className="absolute end-5 bottom-5">
              آشنایی بیشتر
                                        <ChevronRight className="h-4 rtl:rotate-180" />
            </Button>
          </div>
        </div>
        <div className="mx-auto mt-12 grid max-w-7xl grid-cols-2 place-items-center gap-6 md:grid-cols-4">
          <img
            src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
            alt="لوگو"
            className="h-5 sm:h-7 dark:invert"
          />
          <img
            src="/block-media/shadcnblocks/block/logos/nextjs-wordmark.svg"
            alt="لوگو"
            className="h-9 sm:h-11 dark:invert"
          />
          <img
            src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-light.svg"
            alt="لوگو"
            className="h-4 sm:h-6 dark:hidden"
          />
          <img
            src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-dark.svg"
            alt="لوگو"
            className="hidden h-4 sm:h-6 dark:block"
          />
          <img
            src="/block-media/shadcnblocks/block/logos/vercel-wordmark.svg"
            alt="لوگو"
            className="h-6 sm:h-7 dark:invert"
          />
        </div>
      </div>
    </section>
  );
};

export { Hero6 };