import { Globe } from "lucide-react";

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

interface Hero51Props {
  className?: string;
}

const Hero51 = ({ className }: Hero51Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="">
        <div className="relative container mx-auto max-w-xl py-10 text-center">
          <div className="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted))_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_50%_100%_at_50%_50%,#000_60%,transparent_100%)] bg-[size:64px_64px]"></div>
          <h1 className="mb-3 text-xl lg:text-2xll">
            مدیریت دارایی‌های دیجیتال در یک پلتفرم
                                </h1>
          <p className="mb-5 text-sm text-muted-foreground md:text-base">
            دارایی‌های دیجیتال خود را مدیریت، تحلیل و مبادله کنید و از ابزارهای حرفه‌ای برای تصمیم‌گیری بهتر بهره ببرید.
                                </p>
          <Button>ورود به بازار</Button>
          <div className="mt-7 flex items-start justify-center gap-2 font-medium md:text-xl">
            <Globe className="mt-0.5 h-auto w-5" />
            همکاری با شرکت‌های بین‌المللی
                                </div>
        </div>
        <div className="mx-auto mt-14 max-w-7xl overflow-hidden py-8">
          <div className="relative w-full">
            <img
              src="/block-media/shadcnblocks/block/placeholder-1.svg"
              alt="تصویر نمونه"
              className="relative left-1/2 mx-auto max-h-[480px] w-full rounded-xl object-cover shadow-md lg:static lg:max-w-[60vw] xl:max-w-3xl"
            />
            <img
              src="/block-media/shadcnblocks/block/placeholder-2.svg"
              alt="تصویر نمونه"
              className="absolute top-0 right-20 -z-10 hidden max-h-60 -rotate-12 rounded-xl object-cover shadow-md lg:block"
            />
            <img
              src="/block-media/shadcnblocks/block/placeholder-2.svg"
              alt="تصویر نمونه"
              className="absolute right-20 bottom-0 hidden rotate-12 rounded-xl object-cover shadow-md md:max-h-60 lg:block"
            />
            <img
              src="/block-media/shadcnblocks/block/placeholder-3.svg"
              alt="تصویر نمونه"
              className="absolute top-0 left-1/4 -z-10 max-h-44 -rotate-12 rounded-xl object-cover shadow-md min-[450px]:max-h-52 sm:left-1/3 md:max-h-60 lg:left-20"
            />
            <img
              src="/block-media/shadcnblocks/block/placeholder-4.svg"
              alt="تصویر نمونه"
              className="absolute bottom-0 left-1/4 max-h-44 rotate-12 rounded-xl object-cover shadow-md min-[450px]:max-h-52 sm:left-1/3 md:max-h-60 lg:left-20"
            />
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero51 };