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";

export default function Home() {
  return (
    <main>
      <div className="relative overflow-hidden">
        <div className="absolute inset-0 -z-10">
          <Image
            src="/images/top-bg-shape.svg"
            alt="Hero Background"
            fill
            priority
            className="object-cover"
          />
        </div>

        <HeroSection />
        <AboutIntro />
      </div>

      <LiveDemo />
      <StepsSection />

      <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">
          <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="/pricing"
            image="/images/cta.png"
          />
        </div>
      </div>

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