// Phone chrome: minimal 393x852 frame with status bar + home indicator.
// Not a full iOS 26 reproduction — enough to read as a phone at a glance.

// MovingStripe — full-width orange overlay that WRAPS the status bar.
// Identical on iOS and Android per product spec: a persistent top bar
// indicating Moving Mode is active, with a truck icon on the left and
// "Moving Mode — N boxes" label centered. Rendered ABOVE the status-bar
// icons, with status-bar text/icons forced to white.
//   platform="ios"    → takes full device width, tucks under the Dynamic Island
//   platform="android"→ takes full device width, flat bar
function MovingStripe({ platform = 'ios', boxes = 1, dark = false }) {
  const isIOS = platform === 'ios';
  return (
    <div style={{
      position: 'absolute', top: 0, left: 0, right: 0,
      background: '#EA580C', zIndex: 45,
      height: isIOS ? 88 : 70,
      display: 'flex', flexDirection: 'column',
      justifyContent: 'flex-end',
      paddingBottom: 8,
      fontFamily: isIOS ? FONT_STACK : (typeof ANDROID_FONT_STACK !== 'undefined' ? ANDROID_FONT_STACK : FONT_STACK),
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '0 20px', color: '#fff',
        minHeight: 24,
      }}>
        {/* Truck icon */}
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
          <rect x="1" y="7" width="13" height="10" rx="1"/>
          <path d="M14 10h4l3 3v4h-7z"/>
          <circle cx="5.5" cy="18.5" r="2" fill="#EA580C"/>
          <circle cx="17.5" cy="18.5" r="2" fill="#EA580C"/>
        </svg>
        <div style={{
          flex: 1, textAlign: 'center',
          fontSize: 14, fontWeight: 500, letterSpacing: 0.1,
          paddingRight: 20, // visually offset truck for true-center feel
        }}>
          Moving Mode — {boxes} box{boxes === 1 ? '' : 'es'}
        </div>
      </div>
    </div>
  );
}

function PhoneFrame({ dark = false, children, bg, width = 393, height = 852, style = {}, moving = false }) {
  const t = theme(dark);
  const frameBg = bg || t.bg;
  return (
    <div style={{
      width, height, borderRadius: 48, overflow: 'hidden', position: 'relative',
      background: frameBg, boxShadow: dark
        ? '0 20px 40px rgba(0,0,0,0.4), 0 0 0 2px rgba(255,255,255,0.06) inset, 0 0 0 1px rgba(0,0,0,0.5)'
        : '0 20px 40px rgba(15,23,42,0.15), 0 0 0 1px rgba(15,23,42,0.08)',
      fontFamily: FONT_STACK, WebkitFontSmoothing: 'antialiased',
      ...style,
    }}>
      {moving && <MovingStripe platform="ios" />}
      <StatusBar dark={dark} moving={moving} />
      {/* Dynamic island */}
      <div style={{
        position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)',
        width: 120, height: 34, borderRadius: 20, background: '#000', zIndex: 50,
      }} />
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, display: 'flex', flexDirection: 'column' }}>
        {children}
      </div>
      {/* Home indicator */}
      <div style={{
        position: 'absolute', bottom: 8, left: '50%', transform: 'translateX(-50%)',
        width: 134, height: 5, borderRadius: 3,
        background: dark ? 'rgba(255,255,255,0.55)' : 'rgba(0,0,0,0.35)',
        zIndex: 60,
      }} />
    </div>
  );
}

function StatusBar({ dark = false, time = '9:41', moving = false }) {
  const c = moving ? '#fff' : (dark ? '#fff' : '#1A1D21');
  return (
    <div style={{
      height: 54, padding: '16px 30px 0', display: 'flex',
      alignItems: 'center', justifyContent: 'space-between',
      position: 'relative', zIndex: 55, color: c,
    }}>
      <div style={{ fontSize: 16, fontWeight: 600, letterSpacing: -0.2 }}>{time}</div>
      <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
        {/* signal */}
        <svg width="18" height="12" viewBox="0 0 18 12">
          <rect x="0" y="8" width="3" height="4" rx="0.5" fill={c}/>
          <rect x="5" y="5" width="3" height="7" rx="0.5" fill={c}/>
          <rect x="10" y="2" width="3" height="10" rx="0.5" fill={c}/>
          <rect x="15" y="0" width="3" height="12" rx="0.5" fill={c}/>
        </svg>
        {/* wifi */}
        <svg width="16" height="12" viewBox="0 0 16 12">
          <path d="M8 3.5c2.2 0 4.2.9 5.7 2.3l1.1-1.1C12.9 2.9 10.5 1.8 8 1.8S3.1 2.9 1.2 4.7l1.1 1.1C3.8 4.4 5.8 3.5 8 3.5z" fill={c}/>
          <path d="M8 7c1.3 0 2.5.5 3.4 1.4L12.5 7.3C11.3 6.1 9.7 5.4 8 5.4S4.7 6.1 3.5 7.3l1.1 1.1C5.5 7.5 6.7 7 8 7z" fill={c}/>
          <circle cx="8" cy="10.2" r="1.3" fill={c}/>
        </svg>
        {/* 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} strokeOpacity="0.4"/>
          <rect x="2" y="2" width="19" height="8" rx="1.3" fill={c}/>
          <rect x="23.5" y="3.5" width="1.5" height="5" rx="0.75" fill={c} fillOpacity="0.4"/>
        </svg>
      </div>
    </div>
  );
}

Object.assign(window, { PhoneFrame, StatusBar, MovingStripe });