// Desktop view — the "handoff completed" state, shown behind phone to illustrate the bridge

function DesktopCompanion({ theme }) {
  const t = theme;
  return (
    <div style={{ width: 620, height: 420, borderRadius: 14, background: t.isDark ? '#17150F' : '#FDFCF8', border: `1px solid ${t.lineStrong}`, boxShadow: '0 30px 60px rgba(0,0,0,0.25), 0 10px 20px rgba(0,0,0,0.12)', overflow: 'hidden', fontFamily: SEEDEX_FONTS.mono, fontSize: 12, color: t.ink, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      {/* macOS titlebar */}
      <div style={{ height: 32, background: t.isDark ? '#1E1C16' : '#F3EFE7', borderBottom: `1px solid ${t.line}`, display: 'flex', alignItems: 'center', padding: '0 14px', gap: 8, flexShrink: 0 }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#FF5F57' }} />
          <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#FEBC2E' }} />
          <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#28C840' }} />
        </div>
        <div style={{ flex: 1, textAlign: 'center', fontFamily: SEEDEX_FONTS.sans, fontSize: 12, color: t.inkSoft }}>
          iTerm — claude · ~/work/api
        </div>
      </div>

      {/* Terminal body */}
      <div style={{ flex: 1, padding: 18, lineHeight: 1.6, overflow: 'hidden' }}>
        <div style={{ color: t.accent }}>▸ seedex replanted session <span style={{ color: t.inkSoft }}>auth-refactor</span> from iPhone</div>
        <div style={{ color: t.inkFaint, marginTop: 2 }}>  42 messages · 7 files · context preserved</div>
        <div style={{ marginTop: 14 }}>
          <span style={{ color: t.inkFaint }}>you ›</span> <span>Refactor the auth middleware — use the new session lib…</span>
        </div>
        <div style={{ marginTop: 10, color: t.inkSoft }}>
          claude › Reading .env.local (you approved on phone 3s ago)<br/>
          <span style={{ color: t.accent }}>  ✓ AUTH_PROVIDER=clerk</span><br/>
          claude › Updating app/api/[...clerk]/route.ts to use <span style={{ color: t.accent }}>session.verify()</span>…
        </div>
        <div style={{ marginTop: 10, display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ color: t.accent }}>█</span>
          <span style={{ color: t.inkFaint, fontSize: 11 }}>streaming</span>
        </div>
      </div>

      {/* Seedex menubar chip — overlays top-right */}
      <div style={{ position: 'absolute', top: 38, right: 14, padding: '6px 10px', borderRadius: 8, background: t.accentSoft, fontFamily: SEEDEX_FONTS.mono, fontSize: 10, color: t.accentInk, letterSpacing: 1, textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 6 }}>
        <Sprout stage={2} size={14} color={t.accent} soft={t.isDark ? t.accent + '44' : '#FFFFFF'} />
        seedex · synced with iPhone
      </div>
    </div>
  );
}

Object.assign(window, { DesktopCompanion });