// Slim phone frame for side-by-side display at ~320px
function Phone({ children, active = false, label, accent = '#D4FF3A' }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
      <div style={{
        fontFamily: "'Space Grotesk', sans-serif",
        fontSize: 11,
        letterSpacing: 2,
        textTransform: 'uppercase',
        color: active ? accent : '#5A6472',
        fontWeight: 600,
        transition: 'color 0.2s',
      }}>{label}</div>
      <div style={{
        width: 320,
        height: 660,
        borderRadius: 46,
        padding: 6,
        background: '#1a1a1a',
        boxShadow: active
          ? `0 0 0 1px ${accent}44, 0 30px 60px -20px ${accent}33, 0 40px 80px rgba(0,0,0,0.5)`
          : '0 30px 60px -20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04)',
        transition: 'all 0.3s',
        position: 'relative',
      }}>
        <div style={{
          width: '100%',
          height: '100%',
          borderRadius: 40,
          background: '#0B0F14',
          overflow: 'hidden',
          position: 'relative',
        }}>
          {/* dynamic island */}
          <div style={{
            position: 'absolute',
            top: 9, left: '50%',
            transform: 'translateX(-50%)',
            width: 96, height: 28,
            borderRadius: 20,
            background: '#000',
            zIndex: 50,
          }} />
          {/* status bar */}
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0,
            height: 44,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '0 22px',
            zIndex: 40,
            fontFamily: "'SF Pro', -apple-system, system-ui",
            fontSize: 13, fontWeight: 600, color: '#EAEEF3',
            paddingTop: 14,
          }}>
            <span>9:41</span>
            <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
              {/* signal */}
              <svg width="15" height="10" viewBox="0 0 15 10"><rect x="0" y="7" width="2.5" height="3" rx="0.5" fill="#EAEEF3"/><rect x="3.5" y="5" width="2.5" height="5" rx="0.5" fill="#EAEEF3"/><rect x="7" y="3" width="2.5" height="7" rx="0.5" fill="#EAEEF3"/><rect x="10.5" y="0" width="2.5" height="10" rx="0.5" fill="#EAEEF3"/></svg>
              {/* battery */}
              <svg width="22" height="10" viewBox="0 0 22 10"><rect x="0.5" y="0.5" width="18" height="9" rx="2.5" stroke="#EAEEF3" strokeOpacity="0.5" fill="none"/><rect x="2" y="2" width="15" height="6" rx="1.2" fill="#EAEEF3"/><rect x="19.5" y="3.5" width="1.5" height="3" rx="0.5" fill="#EAEEF3" fillOpacity="0.5"/></svg>
            </div>
          </div>
          {/* screen content */}
          <div style={{
            position: 'absolute', inset: 0,
            paddingTop: 44,
            display: 'flex', flexDirection: 'column',
          }}>
            {children}
          </div>
          {/* home indicator */}
          <div style={{
            position: 'absolute', bottom: 8, left: '50%',
            transform: 'translateX(-50%)',
            width: 110, height: 4, borderRadius: 4,
            background: 'rgba(255,255,255,0.35)',
            zIndex: 60,
          }} />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Phone });