// Production shell overrides — load AFTER ios-frame.jsx / browser-window.jsx
// but BEFORE production-entry.jsx.
//
// The design files render inside <IOSDevice>, <ChromeWindow>, and
// <PhoneStatusBarOverlay> to look like a phone-in-a-canvas for design review.
// In real production those wrappers are dead weight — a phone frame
// inside the user's actual phone, a browser chrome inside their actual browser.
//
// We override the globals so when MobileApp/DesktopApp/OnboardingApp render
// they get full-viewport pass-throughs instead.

(function () {
  if (typeof window === 'undefined') return;

  // Transparent full-viewport pass-through replacing IOSDevice's 402x874 frame.
  function ProductionIOSShell({ children }) {
    return React.createElement(
      'div',
      {
        style: {
          width: '100%',
          minHeight: '100vh',
          minHeight: '100dvh',
          position: 'relative',
          background: (typeof W !== 'undefined' && W.bg) || '#faf6ec',
        },
      },
      children
    );
  }

  // Replace ChromeWindow (browser-chrome look) with a transparent wrapper.
  function ProductionChromeShell({ children }) {
    return React.createElement(
      'div',
      {
        style: {
          width: '100%',
          minHeight: '100vh',
          minHeight: '100dvh',
          background: (typeof W !== 'undefined' && W.bg) || '#faf6ec',
        },
      },
      children
    );
  }

  // The fake iOS status bar overlay (clock + battery icons) is design-only.
  // Real device has a real status bar.
  function NullStatusBar() {
    return null;
  }

  window.IOSDevice = ProductionIOSShell;
  window.ChromeWindow = ProductionChromeShell;
  window.PhoneStatusBarOverlay = NullStatusBar;
})();