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

interface Hero100Props {
  className?: string;
}

const Hero100 = ({ className }: Hero100Props) => {
  return (
    <section className={cn("overflow-hidden font-sans", className)}>
      <div className="container px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col items-center justify-between gap-10 md:flex-row">
          <div className="basis-2/4">
            <div className="mt-10 flex flex-col gap-2">
              <p className="text-base font-semibold text-muted-foreground">
                نرم‌افزار مدیریت ارتباط با مشتری
              </p>
              <h1 className="mb-2 text-xl leading-snug! font-medium text-black lg:text-2xll">
                همه اطلاعات مشتریان در یک پلتفرم
              </h1>
              <p className="mb-2 text-lg text-black/80">
                سوابق مشتریان، تعاملات، فرصت‌های فروش و اطلاعات سازمانی را
                به‌صورت یکپارچه مدیریت کنید.
              </p>
              <Button
                asChild
                variant="default"
                className="block h-fit w-fit rounded-full px-7 py-3 text-base font-semibold transition-transform hover:scale-105"
              >
                <a href="#">رایگان امتحان کنید</a>
              </Button>
            </div>
          </div>
          <div className="relative basis-[42%] py-9 md:py-16">
            <div
              aria-hidden
              className="absolute top-0 start-[6.25rem] z-10 aspect-[1.378254211/1] h-full w-[56.25rem] bg-muted"
            />
            <div className="relative z-20 aspect-square w-full">
              <img
                src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
                alt=""
                className="h-full w-full object-cover object-center"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero100 };