// watch-frame.jsx — Apple Watch device frame (Series 9 ish, 45mm)
// Black bezel + rounded screen rect. Screen content lives inside a fixed area.

function WatchFrame({ children, width = 220, height = 270, dark = true, sideButton = true }) {
  const screenW = width - 22;
  const screenH = height - 36;
  return (
    <div style={{
      width, height, position: 'relative',
      fontFamily: '-apple-system, "SF Pro Display", system-ui, sans-serif',
    }}>
      {/* digital crown */}
      <div style={{
        position: 'absolute', right: -7, top: '28%',
        width: 12, height: 26, borderRadius: 3,
        background: 'linear-gradient(90deg, #2a2a2c, #4a4a4d 40%, #1a1a1c)',
        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.4)',
      }} />
      {sideButton && <div style={{
        position: 'absolute', right: -5, top: '58%',
        width: 8, height: 36, borderRadius: 2,
        background: 'linear-gradient(90deg, #2a2a2c, #444 40%, #1a1a1c)',
      }} />}
      {/* watch body */}
      <div style={{
        position: 'absolute', inset: 0,
        borderRadius: 46,
        background: 'linear-gradient(145deg, #2c2c2e, #0a0a0a)',
        boxShadow: '0 30px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1)',
        padding: 11,
      }}>
        {/* screen */}
        <div style={{
          width: screenW, height: screenH,
          borderRadius: 36, overflow: 'hidden',
          background: dark ? '#000' : '#fff',
          position: 'relative',
        }}>
          {children}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { WatchFrame });