/* App root — router + shell */

const M = window.MAF;

function App() {
  return (
    <M.RouteProvider>
      <Shell />
    </M.RouteProvider>
  );
}

function Shell() {
  const { route } = M.useRoute();
  let screen;
  switch (route.name) {
    case 'splash':    screen = <M.Splash />; break;
    case 'landing':   screen = <M.Landing />; break;
    case 'siteplan':  screen = <M.SitePlanPage />; break;
    case 'lot':       screen = <M.LotPage />; break;
    case 'builders':  screen = <M.BuildersList />; break;
    case 'builder':   screen = <M.BuilderProfile />; break;
    case 'plans':     screen = <M.PlansLibrary />; break;
    case 'plan':      screen = <M.PlanDetail />; break;
    case 'pattern':   screen = <M.PatternBook />; break;
    case 'faq':       screen = <M.FAQ />; break;
    default:          screen = <M.Splash />;
  }
  // Tag each screen with a data-screen-label for review/comment context
  const label = {
    splash:    '01 Splash',
    landing:   '02 Landing',
    siteplan:  '03 Site Plan',
    lot:       `04 Lot ${route.n || ''}`,
    builders:  '05a Builders list',
    builder:   `05 Builder · ${route.id || ''}`,
    plans:     '06a Pattern Book library',
    plan:      `06 Plan · ${route.id || ''}`,
    pattern:   'Pattern Book',
    faq:       'FAQ',
  }[route.name] || route.name;

  return <div data-screen-label={label}>{screen}</div>;
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);