// app/frame-prod.jsx — PRODUCTION frame. Loaded after ios-frame.jsx so this
// Object.assign wins. Neutralizes the simulated iPhone bezel: renders children
// full-screen into the real viewport with safe-area insets, since this is now an
// installable PWA, not a mockup.
//
// The prototype's screens already budget for the system chrome: ~52px at the top
// (status-bar clearance) and ~26-30px at the bottom (home-indicator clearance —
// the tab bar, the onboarding CTA, and the reader player all reserve it). So the
// frame must NOT re-add the device safe-area on top, or the bottom gap doubles.
//   - top:    add only the OVERFLOW beyond the screens' ~44px budget.
//   - bottom: 0 — the screens own it (adding env() here is what caused the gap).
//   - left/right: full inset (landscape notch; screens don't budget for it).
function IOSDeviceProd({ children, dark = false }) {
  const bg = dark ? '#0D1628' : '#EFE7D4';
  return (
    <div style={{
      position: 'fixed', inset: 0, overflow: 'hidden', background: bg,
      fontFamily: '-apple-system, system-ui, sans-serif',
      WebkitFontSmoothing: 'antialiased',
    }}>
      <div style={{
        position: 'absolute', inset: 0, boxSizing: 'border-box',
        paddingTop: 'max(0px, calc(env(safe-area-inset-top) - 44px))',
        paddingBottom: 0,
        paddingLeft: 'env(safe-area-inset-left)',
        paddingRight: 'env(safe-area-inset-right)',
      }}>
        <div style={{ height: '100%', position: 'relative' }}>{children}</div>
      </div>
    </div>
  );
}

window.IOSDevice = IOSDeviceProd;