import { FaGithub } from "react-icons/fa6";

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

interface Hero170Props {
  className?: string;
}

const Hero170 = ({ className }: Hero170Props) => {
  return (
    <section
      className={cn(
        "dark overflow-hidden bg-background pt-12 font-sans md:pt-20",
        className,
      )}
    >
      <div className="container">
        <div className="mx-auto max-w-[48.75rem]">
          <h1 className="mb-6 text-center text-3xl leading-tight font-bold text-foreground md:text-xl lg:text-2xll">
            استارتاپ خود را با ابزارهای حرفه‌ای سریع‌تر رشد دهید
                                </h1>
          <p className="mx-auto mb-9 max-w-[37.5rem] text-center text-base font-medium text-foreground md:text-lg">
            داشبوردی یکپارچه برای تحلیل داده‌ها، مدیریت پروژه و همکاری تیمی که تصمیم‌گیری را سریع‌تر و دقیق‌تر می‌کند.
                                </p>
          <div className="mb-10 flex flex-wrap items-center justify-center gap-5">
            <Button
              asChild
              className="block h-fit w-fit rounded-md px-7 py-[0.875rem] font-medium"
            >
              <a href="#">دانلود رایگان</a>
            </Button>
            <Button
              variant="secondary"
              asChild
              className="flex h-fit w-fit items-center gap-4 rounded-md px-7 py-[0.875rem] font-medium"
            >
              <a href="#">
                <FaGithub className="size-6!" />
                <div>ستاره در مخزن کد</div>
              </a>
            </Button>
          </div>
          <p className="mb-4 text-center text-muted-foreground">
            سرویس خود را به ابزارها و اتصال‌های محبوب متصل کنید.
                                </p>
          <div className="flex items-center justify-center gap-4">
            <Button asChild size="icon" variant="ghost" className="block w-fit">
              <a href="#">
                <img
                  src="/block-media/shadcnblocks/block/block-1.svg"
                  alt="لوگو"
                  className="size-10 invert"
                />
              </a>
            </Button>
            <Button asChild size="icon" variant="ghost" className="block w-fit">
              <a href="#">
                <img
                  src="/block-media/shadcnblocks/block/block-2.svg"
                  alt="لوگو"
                  className="size-10 invert"
                />
              </a>
            </Button>
            <Button asChild size="icon" variant="ghost" className="block w-fit">
              <a href="#">
                <img
                  src="/block-media/shadcnblocks/block/block-3.svg"
                  alt="لوگو"
                  className="size-10 invert"
                />
              </a>
            </Button>
            <Button asChild size="icon" variant="ghost" className="block w-fit">
              <a href="#">
                <img
                  src="/block-media/shadcnblocks/block/block-4.svg"
                  alt="لوگو"
                  className="size-10 invert"
                />
              </a>
            </Button>
            <Button asChild size="icon" variant="ghost" className="block w-fit">
              <a href="#">
                <img
                  src="/block-media/shadcnblocks/block/block-5.svg"
                  alt="لوگو"
                  className="size-10 invert"
                />
              </a>
            </Button>
          </div>
        </div>
        <div>
          <div className="relative mx-auto mt-16 w-full max-w-[52.8rem]">
            <img
              src="/block-media/shadcnblocks/block/placeholder-1.svg"
              alt="تصویر نمونه"
              className="relative z-20 -mb-[2px] block w-full rounded-tl-lg rounded-tr-lg"
            />
            <img
              src="/block-media/shadcnblocks/block/patterns/dots.svg"
              alt="تصویر نمونه"
              className="absolute top-0 end-0 z-10 h-20 w-20 translate-x-[20%] -translate-y-[30%] sm:h-32 sm:w-32 md:h-40 md:w-40"
            />
            <img
              src="/block-media/shadcnblocks/block/patterns/dots.svg"
              alt="تصویر نمونه"
              className="absolute bottom-0 start-0 z-10 h-20 w-20 -translate-x-[30%] translate-y-[30%] sm:h-32 sm:w-32 md:h-40 md:w-40"
            />
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero170 };