// Phone frame — custom, Remnant-styled (no iOS radii/chrome noise).
// Fixed 390x844, linen or obsidian surface.

function Phone({ children, dark = false, time = '9:41', width = 390, height = 844, scale = 1 }) {
  const bg = dark ? REM.obsidian : REM.linen;
  const ink = dark ? REM.linen : REM.obsidian;
  return (
    <div style={{
      width: width * scale, height: height * scale,
    }}>
      <div style={{
        width, height, transform: `scale(${scale})`, transformOrigin: 'top left',
        background: '#000', borderRadius: 54, padding: 10, position: 'relative',
        boxShadow: '0 40px 80px -20px rgba(10,44,44,.35), 0 0 0 1px rgba(0,0,0,0.3)',
      }}>
        <div style={{
          width: '100%', height: '100%', background: bg, color: ink,
          borderRadius: 44, overflow: 'hidden', position: 'relative',
          fontFamily: REM.fontBody,
        }}>
          {/* Dynamic island */}
          <div style={{
            position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)',
            width: 122, height: 34, borderRadius: 22, background: '#000', zIndex: 60,
          }}/>
          {/* Status bar */}
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0, height: 54,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '18px 30px 0', zIndex: 55, pointerEvents: 'none',
          }}>
            <span style={{ fontFamily: REM.fontBody, fontWeight: 700, fontSize: 15, color: ink, letterSpacing: '-0.01em' }}>{time}</span>
            <span style={{ display:'flex', gap: 6, alignItems:'center' }}>
              <svg width="17" height="11" viewBox="0 0 17 11"><rect x="0"  y="6" width="3" height="5" rx=".6" fill={ink}/><rect x="4.5" y="4" width="3" height="7" rx=".6" fill={ink}/><rect x="9" y="2" width="3" height="9" rx=".6" fill={ink}/><rect x="13.5" y="0" width="3" height="11" rx=".6" fill={ink}/></svg>
              <svg width="24" height="11" viewBox="0 0 24 11"><rect x=".5" y=".5" width="20" height="10" rx="2.5" stroke={ink} strokeOpacity=".4" fill="none"/><rect x="2" y="2" width="17" height="7" rx="1" fill={ink}/><rect x="21.5" y="3.5" width="1.5" height="4" rx=".5" fill={ink} fillOpacity=".5"/></svg>
            </span>
          </div>
          <div style={{ position:'absolute', inset: 0, display:'flex', flexDirection:'column' }}>
            {children}
          </div>
          {/* Home indicator */}
          <div style={{
            position: 'absolute', bottom: 8, left: 0, right: 0, zIndex: 80,
            display: 'flex', justifyContent: 'center', pointerEvents: 'none',
          }}>
            <div style={{ width: 134, height: 5, borderRadius: 999, background: dark ? 'rgba(240,238,234,.65)' : 'rgba(26,26,26,.45)' }}/>
          </div>
        </div>
      </div>
    </div>
  );
}

// Top app chrome inside the phone — not a giant iOS large title.
// Remnant voice: REMNANT. wordmark + tracked subtitle.
function PhoneChrome({ dark, left, right, title, subtitle }) {
  const ink = dark ? REM.linen : REM.obsidian;
  const muted = dark ? 'rgba(240,238,234,.55)' : REM.inkSubtle;
  const hair = dark ? 'rgba(240,238,234,.14)' : 'rgba(26,26,26,.12)';
  return (
    <div style={{ paddingTop: 54, borderBottom: `1px solid ${hair}` }}>
      <div style={{
        display:'flex', justifyContent:'space-between', alignItems:'center',
        padding: '12px 20px 10px',
      }}>
        <div style={{ minWidth: 40 }}>{left}</div>
        <Wordmark color={ink} period={dark ? REM.sage : REM.deepTeal} size={13}/>
        <div style={{ minWidth: 40, display:'flex', justifyContent:'flex-end' }}>{right}</div>
      </div>
      {(title || subtitle) && (
        <div style={{ padding: '8px 20px 18px' }}>
          {subtitle && <div style={{ marginBottom: 8 }}><Eyebrow color={muted}>{subtitle}</Eyebrow></div>}
          {title && (
            <div style={{
              fontFamily: REM.fontDisplay, fontWeight: 500, fontSize: 34, lineHeight: 1.02,
              letterSpacing: '-0.02em', color: ink,
            }}>{title}</div>
          )}
        </div>
      )}
    </div>
  );
}

// Large primary bottom-anchored button
function PrimaryBar({ label, onClick, dark = false, disabled = false, accent = null, note = null }) {
  const bg = accent || (dark ? REM.linen : REM.obsidian);
  const fg = accent ? REM.linen : (dark ? REM.obsidian : REM.linen);
  return (
    <div style={{ padding: '14px 16px 28px', borderTop: `1px solid ${dark ? 'rgba(240,238,234,.14)' : 'rgba(26,26,26,.12)'}`, background: dark ? REM.obsidian : REM.linen, position:'relative', zIndex: 30 }}>
      {note && <div style={{ textAlign:'center', marginBottom: 10 }}><Eyebrow color={dark ? 'rgba(240,238,234,.55)' : REM.inkSubtle}>{note}</Eyebrow></div>}
      <Press
        disabled={disabled}
        onClick={disabled ? null : onClick}
        freq={1100}
        style={{
          width: '100%', height: 60, background: bg, color: fg,
          display:'flex', alignItems:'center', justifyContent:'space-between',
          padding: '0 26px', opacity: disabled ? .4 : 1,
        }}>
        <Eyebrow color={fg} size={12} track="0.24em">{label}</Eyebrow>
        <span style={{ fontFamily: REM.fontDisplay, fontSize: 22, color: fg, fontWeight: 400 }}>→</span>
      </Press>
    </div>
  );
}

Object.assign(window, { Phone, PhoneChrome, PrimaryBar });