const SCREENS = {
  landing: { comp: 'Landing', crumbs: ['ShikshaTri', 'Product Overview'] },
  student: { comp: 'StudentDashboard', crumbs: ['Student', 'Dashboard'] },
  library: { comp: 'TradeLibrary', crumbs: ['Student', 'Trade Library'] },
  lesson:  { comp: 'LessonViewer', crumbs: ['Student', '3D Lessons', 'Electrician · Three-Phase Motor'] },
  animation: { comp: 'ProcessAnimation', crumbs: ['Student', 'Process Animation'] },
  lab:     { comp: 'VirtualLab', crumbs: ['Student', 'Virtual Lab', 'MIG Welding — Butt Joint'] },
  workshop: { comp: 'VirtualWorkshop', crumbs: ['Student', 'Virtual Workshop', 'Fitting Shop'] },
  arvr:    { comp: 'ARVRLearning', crumbs: ['Student', 'AR & VR Learning'] },
  assess:  { comp: 'Assessment', crumbs: ['Student', 'Assessments', 'Fitter · Semester 3 Mock Test'] },
  tutor:   { comp: 'AITutor', crumbs: ['Student', 'AI Tutor'] },
  certificates: { comp: 'Certificates', crumbs: ['Student', 'Certificates & Achievements'] },
  readiness: { comp: 'IndustryReadiness', crumbs: ['Student', 'Industry Readiness'] },
  manual:  { comp: 'WorkshopManual', crumbs: ['Student', 'Digital Workshop Manual'] },
  help:    { comp: 'HelpSupport', crumbs: ['Support', 'Help & Contacts'] },
  profile: { comp: 'StudentProfile', crumbs: ['Account', 'My Profile'] },
  instructor: { comp: 'InstructorPortal', crumbs: ['Instructor', 'Portal'] },
  classroom: { comp: 'SmartClassroom', crumbs: ['Instructor', 'Smart Classroom'] },
  questionbank: { comp: 'QuestionBank', crumbs: ['Instructor', 'Question Bank'] },
  admin:   { comp: 'AdminDashboard', crumbs: ['Administrator', 'Institute Overview'] },
  reports: { comp: 'ReportsAnalytics', crumbs: ['Administrator', 'Reports & Analytics'] },
};

function App() {
  const [screen, setScreen] = React.useState(() => {
    try { return localStorage.getItem('st-screen') || 'landing'; } catch { return 'landing'; }
  });

  React.useEffect(() => {
    try { localStorage.setItem('st-screen', screen); } catch {}
  }, [screen]);

  const meta = SCREENS[screen] || SCREENS.landing;
  const Comp = window[meta.comp];

  // Landing renders full-bleed (no shell)
  if (screen === 'landing') {
    return <window.Landing onNavigate={setScreen} />;
  }

  return (
    <window.AppShell current={screen} onNavigate={setScreen} crumbs={meta.crumbs}>
      {Comp ? <Comp onNavigate={setScreen} /> : <div style={{padding: 40}}>Loading {meta.comp}…</div>}
    </window.AppShell>
  );
}

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