import { Globe } from "lucide-react";

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

interface Hero53Props {
  className?: string;
}

const Hero53 = ({ className }: Hero53Props) => {
  return (
    <section className={cn("relative py-32", className)}>
      <div className="container px-4 sm:px-6 md:px-8">
        <div className="absolute inset-0 -z-10 h-full w-full bg-[radial-gradient(var(--muted-foreground)_1px,transparent_1px)] [background-size:14px_14px] opacity-35"></div>
        <h1 className="text-2xll font-bold tracking-tight md:text-2xll lg:text-2xll xl:text-8xl">
          مدیریت کد و مستندات را ساده‌تر کنید.
                          </h1>
        <div className="mt-10 flex flex-col-reverse gap-8 md:mt-12 md:flex-row md:items-center md:gap-10 lg:mt-14">
          <div className="flex flex-col gap-6">
            <Button className="px-6 py-5 sm:w-fit">
              درخواست دسترسی <Globe className="size-4" />
            </Button>
            <div className="flex items-center gap-3">
              <span className="inline-flex items-center -space-x-1.5">
                <Avatar className="size-7 border">
                  <AvatarImage
                    src="/block-media/shadcnblocks/block/avatar-1.webp"
                    alt="نمونه"
                  />
                </Avatar>
                <Avatar className="size-7 border">
                  <AvatarImage
                    src="/block-media/shadcnblocks/block/avatar-6.webp"
                    alt="نمونه"
                  />
                </Avatar>
                <Avatar className="size-7 border">
                  <AvatarImage
                    src="/block-media/shadcnblocks/block/avatar-3.webp"
                    alt="نمونه"
                  />
                </Avatar>
              </span>
              <p className="text-sm text-muted-foreground">
                مورد اعتماد بیش از ۲۰۰۰ توسعه‌دهنده در سراسر جهان
              </p>
            </div>
          </div>
          <p className="max-w-lg text-xl leading-relaxed text-muted-foreground">
            با خودکارسازی مستندسازی، مدیریت وظایف و دانش فنی، سرعت توسعه تیم را افزایش دهید.
                                </p>
        </div>
      </div>
    </section>
  );
};

export { Hero53 };