/* Main app router */
(function () {
  const { useState, useEffect } = React;
  const Icon = window.Icon, Logo = window.Logo, Shell = window.Shell, useToast = window.useToast;

  const APP_ROUTES = ['dashboard', 'plot', 'construction', 'payments', 'documents', 'notices', 'sectormaps', 'transfer', 'assistant', 'support', 'profile', 'sampleplans', 'journey', 'myjourney'];

  function App() {
    const [route, setRoute] = useState(() => localStorage.getItem('yeida_route') || 'welcome');
    const [toastNode, toast] = useToast();
    const go = (r) => { setRoute(r); localStorage.setItem('yeida_route', r); window.scrollTo(0, 0); };
    useEffect(() => { document.body.style.background = APP_ROUTES.includes(route) ? 'var(--bg)' : '#fff'; }, [route]);

    // Auth + public
    if (route === 'welcome') return React.createElement(window.Welcome, { go });
    if (route === 'login') return React.createElement(window.LoginSelect, { go });
    if (route === 'login-allotment') return React.createElement(window.AllotmentLookup, { go });
    if (route === 'verify' || route === 'otp') return React.createElement(window.Verify, { go });
    if (route === 'register') return React.createElement(window.Register, { go });
    if (route === 'app') { go('dashboard'); return null; }
    if (route === 'sectormaps-public') return React.createElement(PublicMaps, { go });

    // Authenticated app
    const content = {
      dashboard: window.Dashboard, plot: window.MyPlot, construction: window.Construction,
      payments: window.Payments, documents: window.Documents, notices: window.Notices,
      sectormaps: window.SectorMaps, transfer: window.Transfer, assistant: window.Assistant,
      support: window.Support, profile: window.Profile,
      sampleplans: window.SamplePlans, journey: window.Journey, myjourney: window.MyJourney,
    }[route] || window.Dashboard;

    return React.createElement(React.Fragment, null,
      React.createElement(Shell, { route, go },
        React.createElement(content, { go, toast })),
      toastNode
    );
  }

  // Public sector maps (pre-login)
  function PublicMaps({ go }) {
    return React.createElement('div', { style: { minHeight: '100vh', background: 'var(--bg)' } },
      React.createElement('header', { style: { height: 64, background: '#fff', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 32px', position: 'sticky', top: 0, zIndex: 50 } },
        React.createElement('button', { onClick: () => go('welcome'), style: { background: 'none', border: 'none', cursor: 'pointer' } }, React.createElement(Logo, { size: 36 })),
        React.createElement('div', { className: 'row gap-3' },
          React.createElement('button', { className: 'btn btn-ghost', onClick: () => go('welcome') }, React.createElement(Icon, { name: 'chevL', size: 16 }), 'Home'),
          React.createElement('button', { className: 'btn btn-primary', onClick: () => go('login') }, 'Login to Portal', React.createElement(Icon, { name: 'arrowR', size: 17 })))
      ),
      React.createElement('div', { style: { maxWidth: 1600, margin: '0 auto', padding: '28px 36px' } },
        React.createElement(window.PageHead, { title: 'Explore Sector Maps', subtitle: 'Browse plotted layouts and master plans across YEIDA sectors — no login required' }),
        React.createElement(window.SectorMaps, { go })
      )
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));
})();