import { ExternalLink } from "lucide-react";

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

interface Hero12Props {
  className?: string;
}

const Hero12 = ({ className }: Hero12Props) => {
  return (
    <section className={cn("relative overflow-hidden py-32", className)}>
      <div className="absolute inset-x-0 top-0 flex h-full w-full items-center justify-center opacity-100">
        <img
          alt="پس‌زمینه"
          src="/block-media/shadcnblocks/block/patterns/square-alt-grid.svg"
          className="[mask-image:radial-gradient(75%_75%_at_center,white,transparent)] opacity-90"
        />
      </div>
      <div className="relative z-10 container">
        <div className="mx-auto flex max-w-5xl flex-col items-center">
          <div className="flex flex-col items-center gap-6 text-center">
            <div className="rounded-xl bg-background/30 p-4 shadow-sm backdrop-blur-sm">
              <img
                src="/block-media/shadcnblocks/block/block-1.svg"
                alt="لوگو"
                className="h-16"
              />
            </div>
            <div>
              <h1 className="mb-6 text-xl font-bold tracking-tight text-pretty lg:text-2xll">
                پروژه بعدی خود را با{" "}
                <span className="text-primary">Blocks</span> بلاک‌های آماده بسازید
                                            </h1>
              <p className="mx-auto max-w-3xl text-muted-foreground lg:text-xl">
                کامپوننت‌های آماده و استاندارد را انتخاب کنید، سفارشی‌سازی کنید و بدون اتلاف زمان در پروژه خود به‌کار بگیرید.
                                            </p>
            </div>
            <div className="mt-6 flex justify-center gap-3">
              <Button className="shadow-sm transition-shadow hover:shadow">
                شروع رایگان
                                            </Button>
              <Button variant="outline" className="group">
                آشنایی بیشتر{" "}
                <ExternalLink className="ms-2 h-4 transition-transform group-hover:translate-x-0.5 rtl:group-hover:-translate-x-0.5" />
              </Button>
            </div>
            <div className="mt-20 flex flex-col items-center gap-5">
              <p className="font-medium text-muted-foreground lg:text-start">
                بر پایه فناوری‌های متن‌باز و استانداردهای روز
                                            </p>
              <div className="flex flex-wrap items-center justify-center gap-4">
                <a
                  href="#"
                  className={cn(
                    buttonVariants({ variant: "outline" }),
                    "group flex aspect-square h-12 items-center justify-center p-0",
                  )}
                >
                  <img
                    src="/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg"
                    alt="ری یو آی logo"
                    className="h-6 saturate-0 transition-all group-hover:saturate-100"
                  />
                </a>
                <a
                  href="#"
                  className={cn(
                    buttonVariants({ variant: "outline" }),
                    "group flex aspect-square h-12 items-center justify-center p-0",
                  )}
                >
                  <img
                    src="/block-media/shadcnblocks/block/logos/typescript-icon.svg"
                    alt="لوگوی زبان نوع‌ایمن"
                    className="h-6 saturate-0 transition-all group-hover:saturate-100"
                  />
                </a>

                <a
                  href="#"
                  className={cn(
                    buttonVariants({ variant: "outline" }),
                    "group flex aspect-square h-12 items-center justify-center p-0",
                  )}
                >
                  <img
                    src="/block-media/shadcnblocks/block/logos/react-icon.svg"
                    alt="لوگوی رابط کاربری"
                    className="h-6 saturate-0 transition-all group-hover:saturate-100"
                  />
                </a>
                <a
                  href="#"
                  className={cn(
                    buttonVariants({ variant: "outline" }),
                    "group flex aspect-square h-12 items-center justify-center p-0",
                  )}
                >
                  <img
                    src="/block-media/shadcnblocks/block/logos/tailwind-icon.svg"
                    alt="لوگوی استایل‌دهی مدرن"
                    className="h-6 saturate-0 transition-all group-hover:saturate-100"
                  />
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero12 };