function App() {
  const { Sidebar, TopBar, useBreakpoint } = window.SIGADesignSystem_97fcbf;
  const [loggedIn, setLoggedIn] = React.useState(true);
  const [page, setPage] = React.useState('panel');
  const bp = useBreakpoint();
  const mobile = bp === 'mobile';
  const [collapsed, setCollapsed] = React.useState(mobile);
  React.useEffect(() => { setCollapsed(mobile); }, [mobile]);
  if (!loggedIn) return <window.LoginScreen onLogin={() => setLoggedIn(true)} />;
  const screens = { panel: window.PanelScreen, campos: window.CamposScreen, sanidad: window.SanidadScreen };
  const Screen = screens[page] || (() => null);
  const logoSrc = collapsed
    ? 'https://hbs-repo.sfo3.cdn.digitaloceanspaces.com/Nacho/testing/Others/SIGA%20lockup%20ondark%20MINI.png'
    : 'https://hbs-repo.sfo3.cdn.digitaloceanspaces.com/Nacho/testing/Others/SIGA%20lockup%20ondark.png';
  return (
    <div style={{ display: 'flex', height: '100%' }}>
      {mobile && !collapsed && (
        <div
          onClick={() => setCollapsed(true)}
          style={{ position: 'fixed', inset: 0, background: 'rgba(4,15,26,0.5)', zIndex: 90 }}
        />
      )}
      <Sidebar
        active={page}
        onSelect={(key) => { setPage(key); if (mobile) setCollapsed(true); }}
        collapsed={collapsed}
        onToggleCollapse={() => setCollapsed(c => !c)}
        mobile={mobile}
        logo={<img src={logoSrc} alt="SIGA" style={{ height: collapsed && !mobile ? 28 : 46 }} />}
      />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'auto', background: 'var(--surface-page)', minWidth: 0 }}>
        <TopBar onMenuClick={mobile ? () => setCollapsed(false) : undefined} />
        <Screen />
      </div>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);