// Themable Android phone frame for the Ledger SNA login prototype.
// Drawn from scratch (not the M3 starter) so it can theme with Tweaks.

const PhoneStatusBar = ({ time = '9:41', dark }) => {
  const c = dark ? '#f3f4f7' : '#0c0d12';
  return (
    <div style={{
      height: 36, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 22px 0 24px', position: 'relative',
      fontFamily: "'DM Sans', system-ui", fontSize: 13, fontWeight: 600, color: c,
      letterSpacing: 0.2, flexShrink: 0,
    }}>
      <span>{time}</span>
      {/* punch-hole */}
      <div style={{
        position: 'absolute', left: '50%', top: 10, transform: 'translateX(-50%)',
        width: 12, height: 12, borderRadius: '50%', background: '#0a0a0a',
        boxShadow: '0 0 0 1px rgba(255,255,255,0.04) inset',
      }} />
      {/* right icons */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        {/* signal */}
        <svg width="14" height="11" viewBox="0 0 14 11" fill="none">
          <rect x="0" y="7" width="2" height="4" rx="0.5" fill={c}/>
          <rect x="4" y="5" width="2" height="6" rx="0.5" fill={c}/>
          <rect x="8" y="2.5" width="2" height="8.5" rx="0.5" fill={c}/>
          <rect x="12" y="0" width="2" height="11" rx="0.5" fill={c} opacity="0.45"/>
        </svg>
        {/* wifi */}
        <svg width="13" height="10" viewBox="0 0 13 10" fill="none">
          <path d="M6.5 8.5 L9.2 5.7 a4 4 0 0 0 -5.4 0 L6.5 8.5z" fill={c}/>
          <path d="M1.2 3.3 a8 8 0 0 1 10.6 0 l-1.4 1.4 a6 6 0 0 0 -7.8 0 L1.2 3.3z" fill={c} opacity="0.7"/>
        </svg>
        {/* battery */}
        <div style={{
          width: 22, height: 11, borderRadius: 3, border: `1px solid ${c}`,
          position: 'relative', padding: 1.5, boxSizing: 'border-box', opacity: 0.9,
        }}>
          <div style={{ width: '78%', height: '100%', background: c, borderRadius: 1 }} />
          <div style={{
            position: 'absolute', right: -3, top: 3, width: 2, height: 5,
            background: c, borderRadius: 1,
          }} />
        </div>
      </div>
    </div>
  );
};

const PhoneNavBar = ({ dark }) => (
  <div style={{
    height: 22, display: 'flex', alignItems: 'center', justifyContent: 'center',
    flexShrink: 0,
  }}>
    <div style={{
      width: 124, height: 4, borderRadius: 4,
      background: dark ? '#f3f4f7' : '#0c0d12', opacity: 0.85,
    }} />
  </div>
);

const PhoneFrame = ({ children, dark, time, width = 392, height = 820 }) => {
  const bg = dark ? '#0e0f15' : '#ffffff';
  return (
    <div style={{
      width, height,
      borderRadius: 44, padding: 4,
      background: dark
        ? 'linear-gradient(180deg, #1a1c24 0%, #0a0b10 100%)'
        : 'linear-gradient(180deg, #2a2c33 0%, #14151a 100%)',
      boxShadow: '0 30px 80px -20px rgba(20,22,30,0.45), 0 8px 24px -8px rgba(20,22,30,0.25), 0 0 0 0.5px rgba(255,255,255,0.06) inset',
      position: 'relative',
    }}>
      <div style={{
        width: '100%', height: '100%',
        borderRadius: 40, overflow: 'hidden',
        background: bg,
        display: 'flex', flexDirection: 'column',
        position: 'relative',
      }}>
        <PhoneStatusBar time={time} dark={dark} />
        <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
          {children}
        </div>
        <PhoneNavBar dark={dark} />
      </div>
    </div>
  );
};

Object.assign(window, { PhoneFrame, PhoneStatusBar, PhoneNavBar });