import { MoveRight } from "lucide-react";

import { AspectRatio } from "@/components/ui/aspect-ratio";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Hero159Props {
  className?: string;
}

const Hero159 = ({ className }: Hero159Props) => {
  return (
    <section
      className={cn(
        "relative overflow-hidden bg-primary/5 pt-28 pb-12 md:pt-40 md:pb-20 lg:pt-48",
        className,
      )}
    >
      <div className="relative z-10 container">
        <div className="grid grid-cols-1 gap-x-20 gap-y-10 md:grid-cols-[1fr_1fr] xl:gap-x-48">
          <div>
            <div className="flex h-full flex-col justify-between gap-6 md:gap-24">
              <div>
                <h1 className="mb-4 text-2xll leading-tight font-bold text-gray-900 lg:text-[3.625rem] xl:text-2xll">
                  موفقیت مالی شما را ممکن می‌کنیم
                </h1>
                <p className="text-lg text-muted-foreground">
                  ابزارهای حرفه‌ای مدیریت سرمایه، تحلیل مالی و برنامه‌ریزی را در یک پلتفرم امن در اختیار داشته باشید.
                                                  </p>
              </div>
              <div className="flex flex-wrap items-center gap-5">
                <Button
                  asChild
                  className="group flex h-fit w-fit items-center gap-2 rounded-full px-8 py-3"
                >
                  <a href="#">
                    <div className="font-medium text-white">
                      شروع رایگان
                    </div>
                    <div className="relative h-6 w-7 overflow-hidden">
                      <div className="absolute top-0 left-0 flex -translate-x-1/2 items-center transition-all duration-500 group-hover:translate-x-0">
                        <MoveRight className="h-6! w-6! stroke-white px-1 rtl:rotate-180" />
                        <MoveRight className="h-6! w-6! stroke-white px-1 rtl:rotate-180" />
                      </div>
                    </div>
                  </a>
                </Button>
                <p className="text-muted-foreground">
                  بدون هزینه عضویت اولیه
                                                  </p>
              </div>
            </div>
          </div>
          <div className="relative">
            <div className="h-full w-full md:max-w-[37.5rem]">
              <img
                src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
                alt="تصویر نمونه"
                className="aspect-[1.026845638/1] h-full w-full rounded-xl object-cover object-center lg:aspect-[1.34529148/1]"
              />
            </div>
            <div className="absolute bottom-[4%] left-[4%] w-36 lg:w-56">
              <AspectRatio
                ratio={1.140102041 / 1}
                className="overflow-hidden rounded-lg border shadow-sm"
              >
                <img
                  src="/block-media/shadcnblocks/block/placeholder-white-1.svg"
                  alt="تصویر نمونه"
                  className="h-full w-full object-cover object-center"
                />
              </AspectRatio>
            </div>
          </div>
        </div>
      </div>
      <div className="absolute -top-36 end-0 hidden w-1/2 rounded-es-[1.875rem] md:block md:h-[34.375rem] xl:h-[41.5625rem]">
        <img
          src="/block-media/shadcnblocks/block/placeholder-8-wide.svg"
          alt="تصویر نمونه"
          className="h-full w-full object-cover object-center"
        />
      </div>
    </section>
  );
};

export { Hero159 };