import { lazy, Suspense } from "react";
import { Route, Routes } from "react-router-dom";
import { Layout } from "./components/Layout.js";

// A página inicial (Atlas) já carrega o peso pesado de verdade (three.js +
// r3f + drei) — separar as OUTRAS rotas em chunks à parte só evita que
// quem abre o atlas baixe/parseie de graça o código do Quiz, de Planos e
// do painel interno de estatísticas antes mesmo de ver o modelo 3D.
import AtlasPage from "./routes/AtlasPage.js";
const PlanesPage = lazy(() => import("./routes/PlanesPage.js"));
const PhysicalExamPage = lazy(() => import("./routes/PhysicalExamPage.js"));
const CellDivisionPage = lazy(() => import("./routes/CellDivisionPage.js"));
const QuizPage = lazy(() => import("./routes/QuizPage.js"));
const AdminStatsPage = lazy(() => import("./routes/AdminStatsPage.js"));

export default function App() {
  return (
    <Suspense fallback={null}>
      <Routes>
        <Route element={<Layout />}>
          <Route path="/" element={<AtlasPage />} />
          <Route path="/planos-anatomicos" element={<PlanesPage />} />
          <Route path="/exame-fisico" element={<PhysicalExamPage />} />
          <Route path="/divisao-celular" element={<CellDivisionPage />} />
          <Route path="/quiz" element={<QuizPage />} />
        </Route>
        {/* Fora do Layout: painel interno, sem o menu/nav do atlas. */}
        <Route path="/estatisticas" element={<AdminStatsPage />} />
      </Routes>
    </Suspense>
  );
}