function StatusBar(){
  return (<div style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'12px 26px 4px',fontSize:13,fontWeight:700,color:'var(--text-strong)',fontFamily:'var(--font-body)'}}>
    <span style={{fontFamily:'var(--font-mono)'}}>9:41</span>
    <span style={{display:'flex',gap:6,alignItems:'center'}}>
      <Icon name="signal" size={15} color="var(--text-strong)" />
      <Icon name="wifi" size={15} color="var(--text-strong)" />
      <Icon name="battery-full" size={17} color="var(--text-strong)" />
    </span>
  </div>);
}
function PhoneFrame({children}){
  return (<div style={{width:390,height:800,borderRadius:52,padding:11,background:'linear-gradient(160deg,#2A2723,#15130F)',boxShadow:'0 42px 90px rgba(5,59,6,.28), 0 8px 24px rgba(5,59,6,.16)',flex:'0 0 auto'}}>
    <div style={{position:'relative',width:'100%',height:'100%',borderRadius:42,overflow:'hidden',background:'var(--surface-canvas)',display:'flex',flexDirection:'column'}}>
      <StatusBar />
      {children}
    </div>
  </div>);
}
Object.assign(window,{PhoneFrame,StatusBar});