/* iPad frame. Landscape 12.9" proportions, simple bezel + speaker + camera */
const IPadFrame = ({ children, width = 1366, height = 1024, bezel = 22, radius = 44, background = '#0A1026' }) => {
  return (
    <div style={{
      width: width + bezel * 2, height: height + bezel * 2,
      background: '#0B0B0F',
      borderRadius: radius, padding: bezel,
      boxShadow: '0 40px 80px rgba(6,10,30,0.35), 0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 0 3px #141419',
      position: 'relative',
    }}>
      {/* front camera */}
      <div style={{
        position: 'absolute', top: bezel / 2 - 3, left: '50%', transform: 'translateX(-50%)',
        width: 8, height: 8, borderRadius: 8, background: '#1c1c22',
        boxShadow: '0 0 0 1px rgba(255,255,255,0.05)',
      }} />
      <div style={{
        width, height, borderRadius: radius - bezel + 6, overflow: 'hidden',
        background,
        position: 'relative',
      }}>{children}</div>
    </div>
  );
};

const IPadStatusBar = ({ dark = true }) => {
  const c = dark ? 'rgba(255,255,255,0.82)' : 'rgba(10,23,51,0.85)';
  return (
    <div style={{
      height: 28, padding: '0 26px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: '-apple-system, "SF Pro Text", system-ui', fontSize: 14, fontWeight: 600, color: c,
      position: 'absolute', top: 0, left: 0, right: 0, zIndex: 60, pointerEvents: 'none',
    }}>
      <span>9:41</span>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        {/* signal bars */}
        <svg width="18" height="10" viewBox="0 0 18 10">
          {[3,5,7,9].map((h,i)=>(<rect key={i} x={i*4} y={10-h} width="3" height={h} rx="0.5" fill={c}/>))}
        </svg>
        <span style={{ fontSize: 12 }}>WiFi</span>
        {/* battery */}
        <svg width="26" height="12" viewBox="0 0 26 12">
          <rect x="0.5" y="0.5" width="22" height="11" rx="2.5" fill="none" stroke={c} opacity="0.5"/>
          <rect x="23" y="4" width="2" height="4" rx="0.5" fill={c} opacity="0.5"/>
          <rect x="2" y="2" width="18" height="8" rx="1.5" fill={c}/>
        </svg>
      </div>
    </div>
  );
};

window.IPadFrame = IPadFrame;
window.IPadStatusBar = IPadStatusBar;