const { useState, useEffect } = React;
const { Header, Footer, Scene } = window.App.Components;
const { Home, About, Services, Products, Recruit, Contact } = window.App.Pages;

const Router = () => {
    const [page, setPage] = useState('home');

    useEffect(() => {
        const handleNav = (e) => {
            setPage(e.detail);
            window.scrollTo(0, 0);
        };
        window.addEventListener('navigate', handleNav);
        return () => window.removeEventListener('navigate', handleNav);
    }, []);

    const renderPage = () => {
        switch (page) {
            case 'home': return <window.App.Pages.Home />;
            case 'about': return <window.App.Pages.About />;
            case 'services': return <window.App.Pages.Services />;
            case 'products': return <window.App.Pages.Products />;
            case 'recruit': return <window.App.Pages.Recruit />;
            case 'contact': return <window.App.Pages.Contact />;
            default: return <window.App.Pages.Home />;
        }
    };

    return (
        <div className="antialiased min-h-screen flex flex-col relative">
            <window.App.Components.Header activePage={page} />

            {/* 3D Scene Background (Global) */}
            <div className="fixed inset-0 z-0 pointer-events-none">
                <window.App.Components.Scene />
            </div>

            <main className="flex-grow z-10 pt-20">
                {renderPage()}
            </main>

            <window.App.Components.Footer />
        </div>
    );
};

window.App.Router = Router;