"use client";
import Image from "next/image";
import { Suspense, useEffect } from "react";
import { motion } from "framer-motion";

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 AnimatedBackground from "../../components/AnimatedBackground";


export default function Home() {
  return (
    <main>
      <div className="relative overflow-hidden">
        <AnimatedBackground
          src="/images/top-bg-shape.svg"
          alt="Hero Background"
        />
        <motion.div
            initial={{ opacity: 0, y: 40 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
          >
          <HeroSection />
        </motion.div>
        <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"
          />
        </div>
      </div>

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