// ─────────────────────────────────────────────────────────────
// Phone shell — single device frame, 390×760. Centred on the page.
// Matches the existing ui_kits/mobile shell so the prototype reads
// as native ForestLynk product, not a sketch.
// ─────────────────────────────────────────────────────────────

function Phone({ children, time = '9:41' }) {
  return (
    <div style={{
      width: 390, height: 760, background: '#0B1306',
      borderRadius: 44, overflow: 'hidden',
      boxShadow: '0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px #2D3A22',
      display: 'flex', flexDirection: 'column', position: 'relative',
      flexShrink: 0,
    }}>
      {/* iOS-ish status bar — kept minimal */}
      <div style={{
        display: 'flex', justifyContent: 'space-between',
        padding: '14px 22px 6px', font: '600 14px -apple-system, system-ui',
        color: '#F2EDE4', flexShrink: 0,
      }}>
        <span>{time}</span>
        <span style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
          <svg width="16" height="11" viewBox="0 0 16 11">
            <rect x="0" y="7" width="3" height="4" rx="0.5" fill="#F2EDE4"/>
            <rect x="4" y="5" width="3" height="6" rx="0.5" fill="#F2EDE4"/>
            <rect x="8" y="2" width="3" height="9" rx="0.5" fill="#F2EDE4"/>
            <rect x="12" y="0" width="3" height="11" rx="0.5" fill="#F2EDE4"/>
          </svg>
          <svg width="22" height="10" viewBox="0 0 22 10">
            <rect x="0.5" y="0.5" width="19" height="9" rx="2.5" stroke="#F2EDE4" strokeOpacity="0.5" fill="none"/>
            <rect x="2" y="2" width="14" height="6" rx="1" fill="#F2EDE4"/>
          </svg>
        </span>
      </div>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, position: 'relative' }}>
        {children}
      </div>
      <div style={{
        position: 'absolute', bottom: 6, left: '50%', transform: 'translateX(-50%)',
        width: 134, height: 5, background: '#F2EDE4', borderRadius: 3, opacity: 0.7,
        zIndex: 100,
      }}/>
    </div>
  );
}

window.Phone = Phone;
