// Brother Bear — Live entry.
// Hash-routed, store-backed. Renders the active screen full-bleed at the
// viewport size — no fake iOS frame, no preview chrome. Same screens
// module as the design canvas (App Home.html), which keeps the iOS frame.

function LiveApp() {
  const route = useRoute();

  let Screen;
  if (route.name === 'inbox')        Screen = <ScreenInbox />;
  else if (route.name === 'deals')   Screen = <ScreenDeals />;
  else if (route.name === 'deal-detail') Screen = <ScreenDealDetail dealId={route.dealId} />;
  else if (route.name === 'earnings') Screen = <ScreenEarnings />;
  else if (route.name === 'account')  Screen = <ScreenAccount />;
  else Screen = <ScreenInbox />;

  return (
    <StoreProvider>
      <div
        key={route.name + (route.dealId || '')}
        className="bb-live-root"
        style={{
          position: 'fixed', top: 0, left: 0,
          width: '100vw',
          // Default to 100% — inherits the html/body sizing, which is
          // dvh in Safari and vh in PWA mode (see index.html).
          height: '100%',
          // Real status-bar inset at the top; capped bottom clearance
          // so the tab bar sits ~12px above the home indicator instead
          // of honouring the full 34px safe-area reserve.
          '--bb-safe-top': 'env(safe-area-inset-top, 0px)',
          '--bb-safe-bottom': 'min(env(safe-area-inset-bottom, 0px), 12px)',
          animation: 'bbFade 200ms ease-out',
        }}
      >
        {Screen}
      </div>
    </StoreProvider>
  );
}

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