// ProMTK — Phone Shell (enterprise, theme-aware)
const PMPhone = ({ children, variant = 'ios', width = 390, height = 820, time = '9:41', onBack, title, showNav, tab, setTab, scroll = true, hideHomeIndicator, fill }) => {
  const isIos = variant === 'ios';
  const isLight = (typeof document !== 'undefined' && document.documentElement.dataset.theme === 'light');
  return (
    <div className="pm-themed" style={{
      width: fill ? '100%' : width, height: fill ? '100%' : height, borderRadius: fill ? 0 : (isIos ? 52 : 36), overflow: 'hidden', position: 'relative',
      background: c('bg'), fontFamily: pmBase.font,
      boxShadow: fill ? 'none' : `0 40px 90px -20px rgba(0,0,0,${isLight ? 0.2 : 0.7}), 0 0 0 1px ${isLight ? 'rgba(20,16,60,0.12)' : 'rgba(255,255,255,0.06)'}, inset 0 0 0 6px ${isLight ? '#DDD8EC' : '#0a0814'}`,
      color: c('fg'),
      isolation: 'isolate',
    }}>
      <div style={{
        position: 'absolute', top: -40, left: -40, right: -40, height: 320,
        background: 'radial-gradient(60% 70% at 50% 0%, rgba(124,92,255,0.28), rgba(124,92,255,0) 70%)',
        pointerEvents: 'none', zIndex: 0,
      }} />
      {isIos ? (
        <div style={{ position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)', width: 120, height: 34, borderRadius: 20, background: '#000', zIndex: 60 }}>
          <div style={{ position: 'absolute', right: 10, top: 10, width: 10, height: 10, borderRadius: 5, background: '#1a1a2a' }} />
        </div>
      ) : (
        <div style={{ position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)', width: 12, height: 12, borderRadius: 6, background: '#000', zIndex: 60 }} />
      )}

      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: isIos ? 54 : 36, zIndex: 30,
        padding: isIos ? '18px 28px 0' : '10px 16px 0', boxSizing: 'border-box',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontSize: isIos ? 16 : 13, fontWeight: 600, color: c('fg'),
      }}>
        <span style={{ letterSpacing: isIos ? -0.3 : 0 }}>{time}</span>
        <div style={{ display: 'flex', alignItems: 'center', gap: 5, opacity: .95 }}>
          <svg width="17" height="10" viewBox="0 0 17 10"><g fill="currentColor">
            <rect x="0" y="7" width="3" height="3" rx=".5"/><rect x="4.5" y="5" width="3" height="5" rx=".5"/>
            <rect x="9" y="2.5" width="3" height="7.5" rx=".5"/><rect x="13.5" y="0" width="3" height="10" rx=".5"/>
          </g></svg>
          <svg width="14" height="10" viewBox="0 0 14 10" fill="currentColor"><path d="M7 2.5c1.8 0 3.5.7 4.7 1.9l1-1a7.8 7.8 0 0 0-11.4 0l1 1A6.6 6.6 0 0 1 7 2.5Zm0 3c1 0 1.9.4 2.6 1l1-1a5 5 0 0 0-7.2 0l1 1c.7-.6 1.6-1 2.6-1Z"/><circle cx="7" cy="8.5" r="1.2"/></svg>
          <svg width="24" height="10" viewBox="0 0 24 10">
            <rect x=".5" y=".5" width="20" height="9" rx="2.2" fill="none" stroke="currentColor" opacity=".45"/>
            <rect x="2" y="2" width="17" height="6" rx="1.2" fill="currentColor"/>
            <rect x="21.5" y="3" width="1.5" height="4" rx=".4" fill="currentColor" opacity=".45"/>
          </svg>
        </div>
      </div>

      {title && (
        <div style={{ position: 'absolute', top: isIos ? 54 : 42, left: 0, right: 0, zIndex: 20, padding: '12px 20px 10px', display: 'flex', alignItems: 'center', gap: 12 }}>
          {onBack && <IconBtn name="chevronLeft" size={38} iconSize={18} bg={c('chipBg')} onClick={onBack} />}
          <h1 style={{ flex: 1, margin: 0, fontSize: 20, fontWeight: 800, letterSpacing: -0.4, color: c('fg') }}>{title}</h1>
        </div>
      )}

      <div className={scroll ? 'pm-scroll' : undefined} style={{
        position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
        paddingTop: (isIos ? 54 : 42) + (title ? 52 : 0),
        paddingBottom: showNav ? 100 : (hideHomeIndicator ? 0 : 34),
        overflow: scroll ? 'auto' : 'hidden', zIndex: 5,
      }}>{children}</div>

      {showNav && <PMBottomNav tab={tab} setTab={setTab} isIos={isIos}/>}

      {!hideHomeIndicator && isIos && (
        <div style={{ position: 'absolute', bottom: 8, left: 0, right: 0, zIndex: 70, display: 'flex', justifyContent: 'center', pointerEvents: 'none' }}>
          <div style={{ width: 134, height: 5, borderRadius: 3, background: isLight ? 'rgba(0,0,0,0.45)' : 'rgba(255,255,255,0.55)' }}/>
        </div>
      )}
      {!hideHomeIndicator && !isIos && (
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 26, zIndex: 70, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 36, pointerEvents: 'none' }}>
          <div style={{ width: 14, height: 14, border: `1.5px solid ${isLight ? 'rgba(0,0,0,0.45)' : 'rgba(255,255,255,0.55)'}`, transform: 'rotate(45deg)' }}/>
          <div style={{ width: 14, height: 14, borderRadius: 7, border: `1.5px solid ${isLight ? 'rgba(0,0,0,0.45)' : 'rgba(255,255,255,0.55)'}` }}/>
          <div style={{ width: 14, height: 2, background: isLight ? 'rgba(0,0,0,0.45)' : 'rgba(255,255,255,0.55)' }}/>
        </div>
      )}
    </div>
  );
};

const PMBottomNav = ({ tab, setTab, isIos }) => {
  const tabs = [
    { id: 'home', icon: 'home', label: 'Ev' },
    { id: 'pay', icon: 'wallet', label: 'Ödəniş' },
    { id: 'feed', icon: 'users', label: 'Qonşular' },
    { id: 'profile', icon: 'user', label: 'Profil' },
  ];
  return (
    <div style={{ position: 'absolute', bottom: isIos ? 24 : 36, left: 16, right: 16, zIndex: 50, display: 'flex', alignItems: 'center', gap: 10 }}>
      <div style={{
        flex: 1, height: 66, borderRadius: 33,
        background: c('glass'), backdropFilter: 'blur(24px) saturate(180%)', WebkitBackdropFilter: 'blur(24px) saturate(180%)',
        border: `1px solid ${c('line')}`,
        boxShadow: '0 20px 40px -10px rgba(0,0,0,0.25)',
        display: 'flex', alignItems: 'center', padding: '0 6px',
      }}>
        {tabs.map(t => {
          const active = tab === t.id;
          return (
            <button key={t.id} onClick={() => setTab && setTab(t.id)} className="pm-tap" style={{
              flex: 1, height: 54, borderRadius: 27, border: 'none', cursor: 'pointer',
              background: active ? pmBase.gradient : 'transparent',
              color: active ? '#fff' : c('fg3'),
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2,
              boxShadow: active ? '0 8px 20px -6px rgba(124,92,255,0.6)' : 'none',
              fontFamily: pmBase.font, transition: 'all .25s',
            }}>
              <Icon name={t.icon} size={active ? 22 : 20} />
              <span style={{ fontSize: 10, fontWeight: 700, opacity: active ? 1 : .8 }}>{t.label}</span>
            </button>
          );
        })}
      </div>
      <button className="pm-tap" onClick={() => setTab && setTab('sos')} style={{
        width: 66, height: 66, borderRadius: 33, border: 'none', cursor: 'pointer',
        background: 'linear-gradient(135deg, #EF4444, #B91C1C)',
        color: '#fff', boxShadow: '0 12px 28px -8px rgba(239,68,68,0.6)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative',
      }}>
        <span style={{ position: 'absolute', inset: 0, borderRadius: 33, animation: 'pm-glow 2.4s ease-in-out infinite' }}/>
        <span style={{ fontSize: 13, fontWeight: 800, letterSpacing: 1 }}>SOS</span>
      </button>
    </div>
  );
};

Object.assign(window, { PMPhone, PMBottomNav });