import Badge from "../../components/ui/Badge";
import Button from "../../components/ui/Button";
import { useAppSelector } from "../../hooks/useAppRedux";
import { useRouter } from "next/navigation";
import { useModal } from "../../lib/modal-system/ModalContext";

export default function HeroSection() {
  const router = useRouter();
  const { user } = useAppSelector((state) => state.user);
  const { openModal } = useModal();
  const handleAccessKeyClick = () => {
    if (user) {
      if (!user.isVerified) {
        openModal("CHECK_EMAIL_FOR_VERIFICATION", {
          email: user.email,
        });
        return;
      }
      router.push("/profile");
    } else {
      openModal("LOGIN", {});
    }
  };
  return (
    <section className="relative pt-36 pb-8 sm:pt-40 sm:pb-8 md:pt-48 md:pb-section 2xl:pt-48">
      <div className="container-k grid items-center gap-10 md:gap-12 lg:grid-cols-2 lg:gap-14">
        <div className="mx-auto max-w-[590px] text-center lg:mx-0 lg:text-left">
          <Badge>AI Analyzer</Badge>

          <h1 className="font-heading mt-4 text-4xl font-medium leading-tight sm:mt-6 lg:text-4xl 2xl:mt-8 2xl:text-5xl">
            How <span className="text-gradient">AI-Generated</span> Is This
            Image?
          </h1>

          <p className="mx-auto mt-4 max-w-[560px] text-base text-text sm:text-lg md:mt-5 lg:mx-0 2xl:text-lg 2xl:leading-7">
            Analyze any image across the web with a single click. Get an instant
            AI confidence score and understand how likely an image is AI
            generated.
          </p>

          <Button
            className="mt-5 sm:mt-6 lg:mt-10"
            onClick={handleAccessKeyClick}
          >
            Get Access Key
          </Button>
        </div>

        <div className="mx-auto w-full max-w-105 sm:max-w-120 md:max-w-105 lg:ml-auto 2xl:max-w-130">
          <div className="glass rounded-3xl p-2 shadow-card sm:p-3">
            <video
              autoPlay
              muted
              loop
              playsInline
              webkit-playsinline="true"
              disablePictureInPicture
              controls={false}
              controlsList="nodownload nofullscreen noremoteplayback"
              preload="auto"
              className="w-full rounded-2xl object-cover object-top lg:aspect-[4/5] 2xl:aspect-[4/4.803] video-autoplay"
            >
              <source src="/images/banner-video.mp4" type="video/mp4" />
            </video>
          </div>
        </div>
      </div>
    </section>
  );
}
