// t24-phone.jsx — phone shell that wraps each screen
// A pixel-perfect mobile container we drop into iPhone bezels (or render bare for web).

function T24Phone({ width = 380, height = 780, dark, bg = 'var(--t24-grad-sky)', children, hideStatus, fullbleed }) {
  return (
    <div className={dark ? 't24-dark' : ''} style={{
      width, height, position: 'relative', overflow: 'hidden',
      background: dark ? 'var(--t24-bg)' : bg,
      borderRadius: 36, fontFamily: 'var(--t24-font-en)',
      color: dark ? 'var(--t24-text)' : 'var(--t24-text)',
    }}>
      {!hideStatus && <T24StatusBar dark={dark}/>}
      <div style={{ position: 'absolute', top: hideStatus ? 0 : 44, left: 0, right: 0, bottom: 0, overflow: 'hidden' }}>
        {children}
      </div>
    </div>
  );
}

// Scrollable body area inside the phone
function T24Body({ children, pad = 16, padTop, padBottom = 28, bg }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, overflow: 'auto', background: bg,
      padding: `${padTop ?? pad}px ${pad}px ${padBottom}px`,
    }}>
      {children}
    </div>
  );
}

Object.assign(window, { T24Phone, T24Body });