import { ArrowRight } from "lucide-react";
import React from "react";

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

interface Hero215Props {
  className?: string;
}

const Hero215 = ({ className }: Hero215Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="relative container min-h-[100vh]">
        <div className="absolute bottom-45 z-10 lg:max-w-xl">
          <div className="absolute top-0 z-1 size-full bg-background blur-2xl" />
          <h1 className="font-playfair relative z-20 text-start text-2xll tracking-tighter lg:text-2xll">
            خانه ایده‌آل خود را در شهرتان پیدا کنید
          </h1>
          <p className="relative z-20 mt-8 text-muted-foreground">
            صدها کامپوننت استاندارد و قابل سفارشی‌سازی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
                                </p>
        </div>
        <div className="absolute bottom-20 z-10 max-w-xl lg:right-25 lg:bottom-45">
          <Button className="group mt-10 flex w-fit items-center justify-center gap-2 rounded-full border px-4 py-1 tracking-tight">
            تماس با ما
            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:rotate-0 rtl:rotate-180" />
          </Button>
        </div>
        <div className="absolute -top-20 left-0 w-[27rem] max-w-xl">
          <img
            src="/block-media/shadcnblocks/block/lummi/highRise.jpg"
            className="animate-fade-in rounded-2xl object-cover"
            alt="تصویر نمونه"
          />
        </div>
      </div>
    </section>
  );
};

export { Hero215 };