"use client";
import Image from "next/image";
import { Suspense } from "react";

import HeroSection from "../../components/home/HeroSection";
import AboutIntro from "../../components/home/AboutIntro";
import LiveDemo from "../../components/home/LiveDemo";
import StepsSection from "../../components/home/StepsSection";
import FeaturesSection from "../../components/home/FeaturesSection";
import TrustPricingFaq from "../../components/home/TrustPricingFaq";
import CtaSection from "../../components/CtaSection";
import HomeClient from "../../components/home/HomeClient";
import { useRouter } from "next/navigation";
import { useAppSelector } from "../../hooks/useAppRedux";
import { useModal } from "../../lib/modal-system/ModalContext";
import TrustedClientsSection from "../../components/home/TrustedClientsSection";

export default function Home() {
  const router = useRouter();
  const { user } = useAppSelector((state) => state.user);
  const { openModal } = useModal();
  const handleAccessNow = () => {
    if (user) {
      if (!user.isVerified) {
        openModal("CHECK_EMAIL_FOR_VERIFICATION", {
          email: user.email,
        });

        return;
      }

      router.push("/profile");
    } else {
      openModal("LOGIN", {});
    }
  };
  return (
    <main>
      <div className="relative overflow-hidden">
        <div className="absolute inset-0 -z-10 overflow-hidden opacity-50">
          <video
            autoPlay
            muted
            loop
            playsInline
            className="w-full h-full object-contain object-top"
          >
            <source src="/images/animation-video.mp4" type="video/mp4" />
          </video>
        </div>
        <HeroSection />
        <AboutIntro />
        <LiveDemo />
      </div>
      <div className="relative overflow-hidden">
        <div className="absolute inset-0 -z-10">
          <Image
            src="/images/bottom-bg-shape.svg"
            alt="Bottom Background"
            fill
            priority
            className="object-cover"
          />
        </div>
        <div className="relative">
          <StepsSection />
          <FeaturesSection />
          <TrustPricingFaq />

          <CtaSection
            title="Stop Guessing. Start Verifying."
            description="Know how likely any image is AI-generated with a single click."
            buttonText="Get Access Now"
            buttonLink="#"
            image="/images/cta.png"
            onButtonClick={handleAccessNow}
          />

          <TrustedClientsSection />
        </div>
      </div>

      <Suspense fallback={null}>
        <HomeClient />
      </Suspense>
    </main>
  );
}