/* app.jsx — router raíz de la plataforma */
function PlatformApp() {
  const store = useStore();

  if (!store.authed) {
    return <div className="pf dir-c"><AuthScreen store={store} /></div>;
  }

  const titles = {
    dashboard: 'Inicio', property: 'Expediente del inmueble', add: 'Agregar inmueble',
    services: 'Servicios y pagos', checkout: 'Contratación', assistant: 'Asistente IA',
    tramites: 'Trámites', docs: 'Documentos',
  };
  const topCta = store.screen === 'dashboard'
    ? <button className="pf-btn pf-btn-yellow pf-btn-sm" onClick={() => store.nav('add')}><Icon name="plus" size={15} /> Inmueble</button>
    : null;

  let screen;
  switch (store.screen) {
    case 'property': screen = <PropertyDetail store={store} />; break;
    case 'add': screen = <AddProperty store={store} />; break;
    case 'services': screen = <Services store={store} />; break;
    case 'checkout': screen = <Checkout store={store} />; break;
    case 'assistant': screen = <Assistant store={store} />; break;
    case 'tramites': screen = <Tramites store={store} />; break;
    case 'docs': screen = <DocsCenter store={store} />; break;
    default: screen = <Dashboard store={store} />;
  }

  return (
    <div className="pf dir-c">
      <div className="pf-app">
        <Sidebar store={store} />
        <div className="pf-main">
          <Topbar store={store} title={titles[store.screen] || 'YellowBlock'} cta={topCta} />
          <div className="pf-body">{screen}</div>
        </div>
      </div>
    </div>
  );
}

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