import AuthUser from '@/modules/auth/auth-user';
import FAQDiscord from '@/pages/front/partials/FAQDiscord.jsx';
import Features from '@/pages/front/partials/Features.jsx';
import Footer from '@/pages/front/partials/Footer.jsx';
import Hero from '@/pages/front/partials/Hero.jsx';
import { useEffect, useState } from 'react';

const Home = () => {
    const [isClient, setIsClient] = useState(false);
    const [Editor, setEditor] = useState(null);

    useEffect(() => {
        setIsClient(true);
        // Dynamically import Editor only on client-side to avoid SSR issues with Konva
        import('@/modules/editor/editor.jsx').then((module) => {
            setEditor(() => module.default);
        });
    }, []);

    return (
        <div className="min-h-[100vh] bg-neutral-50 pb-10 dark:bg-black">
            <div className="to-muted/10 w-full bg-gradient-to-b from-transparent dark:from-transparent dark:to-neutral-900">
                {isClient && Editor ? (
                    <Editor />
                ) : (
                    <div className="flex h-96 items-center justify-center">
                        <div className="text-muted-foreground">Loading editor...</div>
                    </div>
                )}
            </div>
            <div className="space-y-16">
                <Hero />
                <Features />
                <FAQDiscord />
            </div>
            <Footer />
            <AuthUser />
        </div>
    );
};

export default Home;