"use client";

import Hero from '@/components/Hero';
import Features from '@/components/Features';
import HowItWorks from '@/components/HowItWorks';
import CallToAction from '@/components/CallToAction';
import Toast from '@/components/Toast';
import { useSearchParams, useRouter } from 'next/navigation';
import { Suspense, useEffect, useState } from 'react';

function HomeContent() {
    const searchParams = useSearchParams();
    const router = useRouter();
    const [error, setError] = useState<string | null>(null);

    useEffect(() => {
        const errorMsg = searchParams.get('error');
        if (errorMsg) {
            setError(errorMsg);
            // Clean up URL
            const newUrl = window.location.pathname;
            window.history.replaceState({}, '', newUrl);
        }
    }, [searchParams]);

    return (
        <main>
            {error && <Toast message={error} onClose={() => setError(null)} />}
            <Hero />
            <Features />
            <HowItWorks />
            <CallToAction />
        </main>
    );
}

export default function Home() {
    return (
        <Suspense fallback={<main><Hero /><Features /><HowItWorks /><CallToAction /></main>}>
            <HomeContent />
        </Suspense>
    );
}