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

interface Hero91Props {
  className?: string;
}

const Hero91 = ({ className }: Hero91Props) => {
  return (
    <section
      className={cn(
        "flex min-h-screen items-center justify-between bg-background py-14",
        className,
      )}
    >
      <div className="flex flex-col gap-5 px-[10%] lg:w-[50%] lg:pr-0">
        <p className="font-light text-foreground uppercase">
          ارائه‌های تعاملی با هوش مصنوعی
                          </p>
        <h1 className="text-2xll font-medium text-foreground md:text-2xll lg:text-2xll">
          پلتفرم ساخت ارائه‌های حرفه‌ای
                          </h1>
        <p className="my-8 text-foreground md:text-xl">
          جلسات، ارائه‌ها و محتوای آموزشی را با کمک هوش مصنوعی تولید و مدیریت کنید.
                          </p>
        <div className="flex flex-col gap-4 font-medium md:flex-row">
          <Button className="h-fit items-center gap-1 rounded-full px-6 py-3">
            شروع رایگان
                                </Button>
          <Button variant="secondary" className="h-fit rounded-full px-6 py-3">
            رزرو دمو
          </Button>
        </div>
      </div>
      <div className="relative hidden h-[720px] w-[45%] overflow-hidden rounded-l-full bg-black lg:block">
        <video
          autoPlay
          loop
          muted
          playsInline
          data-wf-ignore="true"
          data-object-fit="cover"
          className="h-full w-full rounded-tl-xl object-cover"
        >
          <source
            src="/block-media/shadcnblocks/block/video-1.mp4"
            type="video/mp4"
          />
        </video>
      </div>
    </section>
  );
};

export { Hero91 };